0

Klipfolio and Mapbox

I tried to follow Klipfolios guide to implementing a Google Map. This worked fine, but since we already had worked with Mapbox in another web application, and since I wanted to tweak the map more than I am able to with Google Maps, I made an attempt of doing the same thing with Mapbox.

 

It took a while but all in all it worked out great. Basically I went with the same HTML Template klip but entered the following in the script pane:

 

require.config({
paths: {
"mapbox": "https://api.mapbox.com/mapbox.js/v2.4.0/mapbox"
}
});

require( ["mapbox"] , function() {
L.mapbox.accessToken = 'your token here';
var map = L.mapbox.map('map', 'mapbox.dark', {
center: [50.2667, 10.4000],
zoom: 7,
zoomControl: false,
minZoom: 3,
maxZoom: 9,
});

});

 

From here I was both able to add markers as a geojson layer and use the gl api to use a tweaked map of my own. If somebody is interested in more details, please just put in comment.

8 comments

  • 0
    Avatar
    Meggan King

    Hi There -

    Thanks for sharing this! I'm sure other customers will find it useful. Can you add a screenshot of what the map looks like? 

     

    Thanks,

    Meggan

  • 0
    Avatar
    Marcus Henningsen

    Hi Meggan,

    certainly, here is the final customized map with the added geojson layer showing where our customers have their battery systems (which is our main product) installed:

  • 0
    Avatar
    Meggan King

    Hi Marcus - 

    Wow! What a beautiful map. Thank you for sharing this in the community. 

    - Meggan

  • 0
    Avatar
    James Hacker

    Hi Marcus,

    I'm definitely interested in more details about how you used the GL api to add in the map. Would you mind sharing those settings as well? This looks great!

  • 0
    Avatar
    Marcus Henningsen

    Hi James,

     

    thanks for your comment, certainly I can provide some more details.

    I simple required the gl path like this:

     

    require.config({
    paths: {
    "mapbox": "https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl"
    }
    });

     

    The rest is more or less the same:

     

    require( ["mapbox"] , function(mapboxgl) {
    mapboxgl.accessToken = 'yourtokenhere';
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'perhapsyourownstylehere',
    center: [10.4000,50.2667],
    zoom: 5,
    zoomControl: false,
    minZoom: 2,
    maxZoom: 11,
    });
    map.dragRotate.disable();
    map.touchZoomRotate.disableRotation();
    });

     

    After this I add the layers and instantiate the map, but this is the same for all maps.

     

    I hope it helps.

    Marcus

  • 0
    Avatar
    Eka Ponkratova

    Hi guys,

    I thought that this post could be useful for those who want to embed a Mapbox map to their klip. See the HTML & JS code at https://jsfiddle.net/ekaponkratova/wh7568sq/8/.

    The initial requirement was to create a cluster map like https://docs.mapbox.com/mapbox-gl-js/example/cluster/. 

    Here is what was done:

    1. Go to the Mapbox studio and generate your public access token.

     

    2. Add the HTML widget in Klipfolio,

    3. To the HTML part, add

    4. To the JavaScript part, add

    5. Replace the token in 'mapboxgl.accessToken' to the token you have copied from Mabox.

    6. Replace 'style:' to the style you want - https://github.com/mapbox/mapbox-gl-language.

    7. Connect the column you want to cluster your data on. In my case, I used angaza_id. Find 'angaza_id' in the JS code and replace with your id.

    8. Chose the column with longitude and add the id - I used 'long' for it

    9. Chose the column with latitude and add the id - I used 'lat' for it

    And that is all. Providing that you named columns you added properly and changed my ids to your ids, the map should work. You can do whatever further modifications. One more thing, we also removed blanks and centered map on the country we are plotting our data for, so you might be interested in changing it to.

    Eka

  • 0
    Avatar
    Janice Janczyn

    Thank you, Eka, for your detailed and helpful instructions!

    Janice

  • 0
    Avatar
    Lorena Gosalvez

    Hi Eka,

    I've been trying last week to "copy/paste" you mapbox HTML Klip solution in order to upload "GPS Points" and generate a map but are still impossible for me. I can't load the map inside de klip properly (even with no GPS points "just the map"). Please could you help me or share the Klip with me?

    The code doesn't work with me and also a can't load just a map inside a klip. This Simpe HTML Code for example works fine and load a map in a browser but i can't put it inside klipfolio clip and still works .... Please could you help me? I'm sure that is a foolishness but i'm making fool!!!

    EXAMPLE HTML CODE EXTERNAL MAPBOX THAT WORKS:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8' />
    <title>Display a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>

    <div id='map'></div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoic29sYWJsYWRlIiwiYSI6ImNqdWZlejdkYTBhb2ozenFycmExdTdhYzAifQ.Cv6VouFIavtTWf2q1WKbuw';
    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
    });
    </script>

    </body>

    Please Janice i will appreciate also your help in order to get success

    Many thanks for helping me.

    Lorena

     

Please sign in to leave a comment.