Set Mappls style ¶

Mappls offers a range of preset styles to rendering the map. The user has to retrieve a list of styles for a specific account. The listing api would help in rendering specific style as well as facilitate the switching of style themes.

From the below reference code it would become quite clear that user has to specify style names and not URLs to use them.

You can get your api key to be used in this document here: https://apis.mappls.com/console/

A default style is set for all account users to start with. To know more about available styles, kindly contact apisupport@mapmyindia.com

To have a look at the refer Live Demo: https://www.mapmyindia.com/api/advanced-maps/WebSDK-LiveDemo/map_style

React JS Components Live Demo : CodeSandbox

Angular Implementation:

import { Component, OnInit } from  '@angular/core';
import { mappls } from  'mappls-web-maps'

@Component({
selector:  'app-root',
template  :  '<div  id="map"  style="width: 99%; height: 99vh; background-color: white;"></div>',
styleUrls: ['./app.component.css']
})
export  class  AppComponent  implements  OnInit {
mapObject:  any;
mapplsClassObject =  new  mappls();

polylineObj : any;
mapProps = { center: [28.6330, 77.2194], traffic:  false, zoom:  4, geolocation:  false, clickableIcons:  false }


      ngOnInit() {

            this.mapplsClassObject.initialize("access_token",()=>{
                  this.mapObject  =  this.mapplsClassObject.Map({id:  "map", properties:  this.mapProps});

                  //load map layers/components after map load, inside this callback (Recommended)
                  this.mapObject.on("load", ()=>{
                  // Activites after mapload

                  this.componentAfterMapLoad();

                  })

                  });

      }// ngoninit

                  componentAfterMapLoad()
                  {
                        this.mapplsClassObject.setStyle('standard-hybrid')
                  }

}

React JS Implementation:

import { mappls } from "mappls-web-maps";
import { useEffect, useRef, useState } from "react";

const mapplsClassObject = new mappls();

const App = () => {
  const map = useRef(null);
  const [isMapLoaded, setIsMapLoaded] = useState(false);

  useEffect(() => {
    mapplsClassObject.initialize("<Add your Token>", { map: true }, () => {
      if (map.current) {
        map.current.remove();
      }
      map.current = mapplsClassObject.Map({
        id: "map",
        properties: {
          center: [28.529467, 77.22315],
          zoom: 15,
        },
      });
      map.current.on("load", () => {
        setIsMapLoaded(true);
        mapplsClassObject.setStyle("standard-hybrid");
      });
    });
  }, []);

  return (
    <div
      id="map"
      style={{ width: "100%", height: "99vh", display: "inline-block" }}
    >
      {isMapLoaded}
    </div>
  );
};
export default App;

That's all!

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!