Skip to main content
Geographic Information Systems

Return to Question

deleted 43 characters in body; edited title
Source Link
PolyGeo ♦
PolyGeo ♦
  • 65.4k
  • 29
  • 114
  • 345

Using Leaflet Layer ControlerController

I've gotI have a strange behavior with my map.

Could you please have a look onat my code? Thanks

By the way: why does thisThis script only runruns on IE and not on FF or Chromium?.

Leaflet Layer Controler

I've got a strange behavior with my map.

Could you please have a look on my code? Thanks

By the way: why does this script only run on IE and not on FF or Chromium?

Using Leaflet Layer Controller

I have a strange behavior with my map.

Could you look at my code?

This script only runs on IE and not on FF or Chromium.

Source Link
hoge6b01
hoge6b01
  • 1.1k
  • 4
  • 20
  • 40

Leaflet Layer Controler

I've got a strange behavior with my map.

I wanted to have to basemaps and one overlay. I've defined classes but when I try to change them via LayerControl I only get one same map.

Could you please have a look on my code? Thanks

By the way: why does this script only run on IE and not on FF or Chromium?

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</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' />

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

<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>

L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiU2FXX0xJMCJ9.WfLHHkqFGqlFgiOkmxgRDA';

var geocoder = L.mapbox.geocoder('mapbox.places-v1');

var redmap = L.mapbox.map('map', 'hoge6b01.kb0pcgai')
            .addControl(L.mapbox.geocoderControl('mapbox.places-v1', {
            autocomplete: true
    }));
    
    geocoder.query('Cologne', showMap);
    
var PencilMap = L.mapbox.tileLayer('examples.a4c252ab').addTo(redmap);

var baseMaps = {
    "Red": redmap,
    "Pencil": PencilMap
    };
    
var greenIcon = L.icon({
    iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    
 var kita = L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9' , {
            pointToLayer: function (geojson, latlng) {
            return L.marker(latlng, {
            icon: greenIcon
            });
            },
            }).addTo(redmap);
        
var overlayMaps = {
    "Kita": kita
    };
   
function showMap(err, data) {
    // The geocoder can return an area, like a city, or a
    // point, like an address. Here we handle both cases,
    // by fitting the map bounds to an area or zooming to a point.
    if (data.lbounds) {
        redmap.fitBounds(data.lbounds);
    } else if (data.latlng) {
        redmap.setView([data.latlng[0], data.latlng[1]], 13);
    }
}

/*L.control.layers({
    'Red Map': L.mapbox.tileLayer('hoge6b01.kb0pcgai'),
    'Pencil Map': L.mapbox.tileLayer('examples.a4c252ab').addTo(map)
}, {
//    'Bike Stations': L.mapbox.tileLayer('examples.bike-locations'),
//    'Bike Lanes': L.mapbox.tileLayer('examples.bike-lanes'),
    //'Kita': L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9').addTo(map)

}).addTo(map);*/

L.control.layers(baseMaps, overlayMaps).addTo(redmap);

</script>

</body>
</html>