1

I am trying to get a webmap working with leaflet.js. I found the beautiful addon of a MiniMap.

But I do not get how it works. It works, if I only have one baselayer; MiniMaps shows up correctly. If I do add some other baselayers the app does not show me any map at all. So I have to comment out that minimap part.

Do you know what's wrong with that map?

Would it be possible that it switches the minimap-background map when switching baselayer of the bigger map?

Here's my code.

<!DOCTYPE html>
<html>

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

<body>

    <!-- Load Esri Leaflet from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.4/esri-leaflet.js">
    </script>

    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js'>
    </script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css' rel='stylesheet' />

    <!-- jQuery is required for this example. -->
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'>
    </script>
    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-osm/v0.1.0/leaflet-osm.js'>
    </script>


    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.js'>
    </script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.css' rel='stylesheet' />


    <style>
        .leaflet-control-locate {
            border: 1px solid rgba(0, 0, 0, 0.4);
        }
        ;
        .leaflet-control-locate a {
            background-color: #fff;
            background-position: -3px, -2px;
        }
        ;
        .leaflet-control-locate.active a {
            background-position: -33px -2px;
        }
        ;
    </style>

    <!-- Include Leaflet.markercluster via rawgit.com, do not use in production -->
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.Default.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.css">
    <script src="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/leaflet.markercluster.js">
    </script>

    <!-- Load Clustered Feature Layer from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-clustered-feature-layer/1.0.0-rc.1/esri-leaflet-clustered-feature-layer.js">
    </script>

    <div id='map'>
    </div>
    <script>
        L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiU2FXX0xJMCJ9.WfLHHkqFGqlFgiOkmxgRDA';
        var map = L.mapbox.map('map')

        var geocoder = L.mapbox.geocoderControl('mapbox.places-v1', {
            autocomplete: true
        })

        ;


        var iplocate = L.control.locate();

        var baseLayers = {
            Streets: L.mapbox.tileLayer('examples.map-i87786ca'),
            Outdoors: L.mapbox.tileLayer('examples.ik7djhcc'),
            Satellite: L.mapbox.tileLayer('examples.map-igb471ik'),
            DarkMap: L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'),
            Terrain: L.tileLayer('http://{s}.tile.stamen.com/terrain-background/{z}/{x}/{y}.jpg')
        };

        var overLayer = {
            Kita: L.esri.clusteredFeatureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9', {
                useCors: false
            })
        };
        overLayer.Kita.bindPopup(function(feature) {
            return L.Util.template('<p>{ADRESSE}<br>{STADTTEIL}<br>{TRAEGER_TYP}</p>', feature.properties);
        });

        //   L.Control.MiniMap(L.mapbox.tileLayer('examples.map-i86nkdio')).addTo(map);
        //map.setView(new L.LatLng(59.9244, 10.7582),10); // add correct lat/lng
        //var miniMap =  L.Control.MiniMap(L.mapbox.tileLayer('examples.map-i87786ca'));




        geocoder.addTo(map);
        iplocate.addTo(map);
        baseLayers.Streets.addTo(map);
        overLayer.Kita.addTo(map);
        // miniMap.addTo(map);
        L.control.layers(baseLayers, overLayer).addTo(map);

        $.ajax({
            url: "https://www.openstreetmap.org/api/0.6/way/315192257/full",
            dataType: "xml",
            success: function(xml) {
                var layer = new L.OSM.DataLayer(xml).addTo(map);
                map.fitBounds(layer.getBounds());
            }
        });


        var miniMap = new L.Control.MiniMap(L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'), {
            toggleDisplay: true,
            position: 'bottomright'
        }).addTo(map);
    </script>


</body>

</html>
3

Like HasT said, you need to uncomment the line where you set the view on the map.

map.setView(new L.LatLng(59.9244, 10.7582),10); 

This is because the minimap needs to centre itself on creation, which it does by checking the centre of the main map. This is done before your Ajax call returns, so no position has been set yet.

I made a JsFiddle to try out your code and prove the solution works: http://jsfiddle.net/y4z9e9os/

Using the F12 tools revealed that the javascript gave an error message saying that no centre had been set.

You should really clean up your code and take out all the duplicated/commented out lines before posting a question, that way it's easier for us to verify the problem.

2

change

// L.Control.MiniMap(L.mapbox.tileLayer('examples.map-i86nkdio')).addTo(map);

to

map.setView(new L.LatLng(59.9244, 10.7582),10); // add correct lat/lng
var miniMap = new L.Control.MiniMap(L.mapbox.tileLayer('examples.map-i86nkdio')).addTo(map);
  • Well, that does not work. Could you produce a working map with your suggestion? – hoge6b01 Dec 10 '14 at 10:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.