Avada Forums Community Forum Implement google maps alternative

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • pjukel
    Participant
    Post count: 1

    Hi,

    is there a way to implement an alternative map like this?

    https://leafletjs.com/index.html

    Thanks
    br
    Peter

    pigsandbees
    Participant
    Post count: 29

    Hi Peter,

    I’ve been experimenting with Leaflet on a couple of Avada sites and the steps below are how I integrated it. It works with no problems but if anyone spots any potential problems feel free to point them out.

    Step 1
    Paste the links to the Leaflet CSS and JS files into Avada > Advanced > Code Fields (tracking etc) > Space before </head> and then Save Changes:

     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    Step 2
    Add some custom CSS for the <div> element that will contain your map. You add this in Avada > Custom CSS then Save Changes. Example CSS below:

    #map { 
         width: 100%; 
         height: 500px; 
         
     }

    Step 3
    Add the Leaflet code to a code block within a page. I’ve copied an example below:

     <div id="map"></div>
    
      <script>
    
      // initialize the map
      var map = L.map('map').setView([53.576269, -1.785105], 12);
    
      // load a tile layer
      L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=ADD_YOUR_ACCESS_TOKEN_HERE',
        {
          attribution: 'Tiles by <a href="https://www.mapbox.com">Mapbox</a>, Data by <a href="https://www.mapbox.com">Mapbox</a>',
          maxZoom: 17,
          minZoom: 9
        }).addTo(map);
    
    // add the marker
    var marker = L.marker([53.576269, -1.785105]).addTo(map);
    
      </script>

    In the first block of code (initialize the map) you need to enter the longtitude/latitude for the map.

    In the second block of code (load a tile layer) you’ll need to go to mapbox.com and register to get an access token and paste it where I’ve got ADD_YOUR_ACCESS_TOKEN_HERE.

    The last block of code adds the map pin. YOu can also create custom location markers and pop-ups. The code for these is on the Leaflet website. Just be sure to use absolute URLs for your custom marker images.

    Hopefully this gets you started.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.