Embedding Mapbox

  • calang

    (@calang)


    8 years, 8 months ago

    Hi,

    I need advice on how to embed a Mapbox map into a wordpress site. As Mapbox isn’t on the whitelist, copying and pasting the URL isn’t supported. Also, I’ve read that in a previous version of mapbox an embed code could be taken straight from mapbox and pasted into wordpress text – this is no longer the case. There was also a mapbox plugin which I think is redundant.

    Through an iframe, it’s easy to do either by directly linking to the mapbox style URL or by linking to an index.html that stores the coding linking to URL. But these methods have their flaws.

    I want to be able to embed the mapbox code right into my webpage.

    See sample HTML below.

    Thanks

    Calang

    <!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></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.40.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.0/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.eyJ1IjoiY2FnIiwiYSI6ImNqNnlqcGdybDF2bXIyd280ZmhxYjdhazcifQ.OaDFCFYdOkd4vYnqYeweUA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10',
    center: [-100.486052, 37.830348],
    zoom: 2
});

map.on('load', function () {
    map.addSource("states", {
        "type": "geojson",
        "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces.geojson"
    });

    map.addLayer({
        "id": "state-fills",
        "type": "fill",
        "source": "states",
        "layout": {},
        "paint": {
            "fill-color": "#627BC1",
            "fill-opacity": 0.5
        }
    });

    map.addLayer({
        "id": "state-borders",
        "type": "line",
        "source": "states",
        "layout": {},
        "paint": {
            "line-color": "#627BC1",
            "line-width": 2
        }
    });

    map.addLayer({
        "id": "state-fills-hover",
        "type": "fill",
        "source": "states",
        "layout": {},
        "paint": {
            "fill-color": "#627BC1",
            "fill-opacity": 1
        },
        "filter": ["==", "name", ""]
    });

    // When the user moves their mouse over the states-fill layer, we'll update the filter in
    // the state-fills-hover layer to only show the matching state, thus making a hover effect.
    map.on("mousemove", "state-fills", function(e) {
        map.setFilter("state-fills-hover", ["==", "name", e.features[0].properties.name]);
    });

    // Reset the state-fills-hover layer's filter when the mouse leaves the layer.
    map.on("mouseleave", "state-fills", function() {
        map.setFilter("state-fills-hover", ["==", "name", ""]);
    });
});
</script>

</body>
</html>
    • This topic was modified 8 years, 8 months ago by calang.

The topic ‘Embedding Mapbox’ is closed to new replies.