How to Create a Mall Map with Real-time Data Using WRLD

This tutorial demonstrates building interactive, real-time 3D mall maps using WRLD, enhancing user experience with dynamic store information and navigation. We'll create two demos: one adding interactive markers to an indoor mall map, the other showing parking capacity with colored polygons. The complete project is available on GitHub.

Beyond simple Google Maps, WRLD allows for indoor 3D maps with interactive markers, offering unique user experiences and in-map UI interactions.

This tutorial covers:

• Setting up: Obtaining a WRLD API key and preparing your development environment (Node.js, npm, yarn).
• Two Approaches: Using WRLD's built-in tools (Map Designer, Places Designer) for a code-free solution, or building a custom app for greater flexibility.
• Indoor Map Controls: Implementing controls for easy floor navigation within the mall.
• Automatic Indoor View: Setting the map to automatically load into indoor view.
• Custom Store Cards: Creating dynamic store cards displaying real-time data (promotions, availability).
• Parking Availability Visualization: Using colored polygons to represent parking space occupancy.

Prerequisites:

Basic understanding of JavaScript DOM, ES6 syntax, and ES6 modules. Familiarity with the WRLD platform is helpful but not required.

Getting Started:

Create a free WRLD account and obtain your API key (see "Building Dynamic 3D Maps" for instructions).

Building the Map (Custom App Approach):

1. Project Setup: Create a project folder, initialize package.json, and create necessary directories and files (src/js, src/css, index.html, app.js, app.css, env.js).
2. Dependencies: Install wrld.js, axios, Babel (for ES6 compilation), Parcel (bundler), and JSON Server (for a dummy API).
3. API Key: Add your WRLD API key to env.js.
4. Basic Map: Create a basic map using Wrld.map() in app.js, specifying your API key, center coordinates, zoom level, and enabling indoor maps.
5. Indoor Controls: Add necessary scripts (jQuery, jQuery UI, indoor_control.js) and a container div (widget-container) to index.html. Initialize the indoor control in app.js.
6. Automatic Indoor Entry: Determine the indoor map ID from the indoormapenter event and use map.indoors.enter() to automatically enter the indoor view on map load.
7. Store Card Data: Create a data folder and populate it with db.json containing store information (coordinates, contact details, opening hours). Run json-server --watch data/db.json to create a local API server.
8. Store Card Design & Implementation: Create HTML templates for the store cards (using JsRender) and a service (api-service.js) to fetch data from the JSON server. Implement a popup service (popup-service.js) to display the store cards in popups on marker clicks. Add markers to the map in app.js, attaching click listeners to trigger the popup service.
9. Parking Availability: Create a separate HTML file (parking.html) and JavaScript file (parking.js). Gather coordinates for parking zones and create polygons using Wrld.polygon(). Use color-coding to represent parking occupancy. Implement real-time updates using Socket.IO (install socket.io, socket.io-client). Create a custom server (server.js) to handle Socket.IO connections and broadcast parking updates. Update the client-side code to listen for and handle these updates.

This detailed breakdown provides a comprehensive guide to building these interactive 3D maps. Remember to consult the provided links for complete code snippets and further details. The possibilities for extending these demos are vast, allowing for integration with real-world data sources and a wide range of applications.

The above is the detailed content of How to Create a Mall Map with Real-time Data Using WRLD. For more information, please follow other related articles on the PHP Chinese website!