Title: Embedding Mapbox
Last modified: September 20, 2017

---

# Embedding Mapbox

 *  [calang](https://wordpress.org/support/users/calang/)
 * (@calang)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/embedding-mapbox/)
 * 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](https://wordpress.org/support/users/calang/).

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 0 replies
 * 1 participant
 * Last reply from: [calang](https://wordpress.org/support/users/calang/)
 * Last activity: [8 years, 8 months ago](https://wordpress.org/support/topic/embedding-mapbox/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
