Reputation: 1

Mapbox non-geographic

I'm trying to mixed up for at least a week , mapbox with leaflet to did a Non geographic map.

My first step was to build it with maptiler.com which generated with the tiled a code based on leaflet. But i want to add to this code a Geojson proprites.

I saw that in Mapbox there is already a geojson popup built-in.

This is why i want to use my leaflet map code + mapbox popup, it's possible ?

Thanks,

Jade

<!DOCTYPE html>
<html>
  <head>
    <title>map</title>
    <meta charset="utf-8"/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />



        <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.ie.css" />
    <![endif]-->
    <script>
    L.mapbox.accessToken = 'pk.eyJ1IjoiamFkZTIyOTMiLCJhIjoiRDdweEFrZyJ9.Yk4XeNmp3SExkU41Z7BU3w';
      function init() {
        var mapMinZoom = 3;
        var mapMaxZoom = 6;
        var map = L.map('map', {
          maxZoom: mapMaxZoom,
          minZoom: mapMinZoom,
          crs: L.CRS.Simple
        }).setView([0, 0], mapMaxZoom);

        var mapBounds = new L.LatLngBounds(
            map.unproject([0, 7680], mapMaxZoom),
            map.unproject([10496, 0], mapMaxZoom));

        map.fitBounds(mapBounds);
        L.tileLayer('{z}/{x}/{y}.png', {
          minZoom: mapMinZoom, maxZoom: mapMaxZoom,
          bounds: mapBounds,
          noWrap: true          
        }).addTo(map);

        // The GeoJSON representing a point feature with a property of 'video' for the Vimeo iframe
var geoJson = {
    features: [{
        type: 'Feature',
        properties: {
            'marker-color': '#f00',
            'marker-size': 'large',
            'marker-symbol': 'rocket',
            video: '<iframe src="//player.vimeo.com/video/106112939" width="380" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/106112939"><h2>How Simplicity Will Save GIS</h2><p>Vladimir Agafonkin</a> from <a href="http://vimeo.com/foss4g">FOSS4G</a> on <a href="https://vimeo.com">Vimeo</a>.</p>',
        },
        geometry: {
            type: 'Point',
            coordinates: [0,0]
        }
    }]
};

var myLayer = L.mapbox.featureLayer().addTo(map);

// Add the iframe in a marker tooltip using the custom feature properties
myLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;

    // Create custom popup content from the GeoJSON property 'video'
    var popupContent =  feature.properties.video;

    // bind the popup to the marker http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 320
    });
});

// Add features to the map
myLayer.setGeoJSON(geoJson);

      }
    </script>
    <style>
      html, body, #map { width:100%; height:100%; margin:0; padding:0; }
      background-color:white;
    </style>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

Upvotes: 0

Answers (3)

Dan

Reputation: 151

It seems that you're asking 2 separate questions here. The original question about non-geographic maps and your follow-up question about adding an iframe to a leaflet popup. I'll try to address your follow-up question:

Let's take the Mapbox example you linked (https://www.mapbox.com/mapbox.js/example/v1.0.0/video/) and adapt it to work with the video you would like to display.

If you've already got some GeoJSON data, you can edit it to include a video property. Let's look at the GeoJSON code from the Mapbox example:

var geoJson = {
    features: [{
        type: 'Feature',
        properties: {
            'marker-color': '#f00',
            'marker-size': 'large',
            'marker-symbol': 'rocket',
            video: '<iframe src="//player.vimeo.com/video/106112939" width="380" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/106112939"><h2>How Simplicity Will Save GIS</h2><p>Vladimir Agafonkin</a> from <a href="http://vimeo.com/foss4g">FOSS4G</a> on <a href="https://vimeo.com">Vimeo</a>.</p>',
        },
        geometry: {
            type: 'Point',
            coordinates: [0,0]
        }
    }]
};

See that video property? Its value contains the iframe code that will end up inside the popup for the map marker it corresponds to. I went ahead and added the iframe code from your YouTube video to the above example and you can see it in action on jsfiddle here: http://jsfiddle.net/danswick/tcxvpw84/.

Your GeoJSON data probably doesn't have a video property, but you can add it using a text editor or geojson.io.

Further down in our example code, we access that video property, set it to a variable, and bind it to our marker's popup:

// Create custom popup content from the GeoJSON property 'video'
    var popupContent =  feature.properties.video;

    // bind the popup to the marker http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 320
    });

Upvotes: 1

Jade

Reputation: 1

Thanks, to take time to reply.

But actually i wanted to use geojson just to put iframe in a leaflet popup.

like this :

L.marker(map.unproject([452, 410])).addTo(map).bindPopup("<iframe width="560" height="315" src="https://www.youtube.com/embed/zP71_cXfiu0" frameborder="0" allowfullscreen></iframe>");

But it doesn't work but with the same syntax this work : I just saw in this exemple that with geojson it's might work : https://www.mapbox.com/mapbox.js/example/v1.0.0/video/

L.marker(map.unproject([452, 410])).addTo(map).bindPopup("https://www.youtube.com/embed/zP71_cXfiu0");

Sorry if i'm a little bit confusing, because i'm designer and all this "code thing" it's new for me :)

Upvotes: 0

iH8

Reputation: 28678

Mapbox just uses Leaflet's bindPopup method which comes standard with L.Marker. If you create a L.GeoJSON layer, you can add a popup to each feature using the onEachFeature option of L.GeoJSON which takes a function with two parameters: feature and layer. In there you can bind a popup to your feature:

For example when you have features like this one, with a property called name:

{
    "type": "Feature",
    "properties": {
        "name": "E"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    }
}

You could then use that name value when binding a popup to your feature like this:

// Create new GeoJSON layer
L.geoJson(data, {
    // Define the onEachFeature function which runs on every feature
    onEachFeature: function (feature, layer) {
        // Bind a popup to the layer using the name property
        layer.bindPopup(feature.properties.name);
    }
}).addTo(map);

Here's a working example on Plunker: http://plnkr.co/edit/iPLHqi?p=preview

Upvotes: 0

Mapbox non-geographic

Answers (3)

Related Questions