2

I am working on a map mixing OpenLayers and leaflet libraries (it is possible, correct ?). I am such a beginner that, after lots of readings, I thought creating pop ups was less difficult for me with leaflet than OpenLayers.

After hours spent to display pop ups, I can't find the right manner. I get a

TypeError:a.div is undefined

HTML :

<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="./leaflet-0.7.3/leaflet.js"></script>
<script src="./highlight.pack.js"></script>
<link rel="stylesheet" href="./leaflet-0.7.3/leaflet.css" />
</head>

 <body>
  <center><div style="width:80%;  height:98%" id="map"></div><center>
  <script defer="defer" type="text/javascript">

    var map = new OpenLayers.Map({
        div: "map",
        projection: "EPSG:3857", 
        });
    var osm = new OpenLayers.Layer.OSM();

    map.addLayer(osm);
    map.setCenter(new OpenLayers.LonLat(131046.64, 5990608.29), 9);
    <!--map.zoomTo(9)-->

    //style pour les operations  
    var defaultStyle = new OpenLayers.Style({
        'display': "none", //pas d'affichage de la couche
        'pointRadius': 4,
        'strokeColor': "red",
        'strokeWidth': 0.5
    });

    var selectStyle = new OpenLayers.Style({
        'pointRadius': 10
    });

    var operationStyle = new OpenLayers.StyleMap({'default': defaultStyle,
                            'select': selectStyle});

   //layer communes d'apres geojson
    var commune = new OpenLayers.Layer.Vector(
        "commune", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "communes.geojson",
            format: new OpenLayers.Format.GeoJSON()
        }),
        //autre maniere de creer un style
        styleMap: new OpenLayers.StyleMap({
            'fillOpacity': 0,
            'strokeColor': "red",
            'strokeWidth': 0.8,
            'label': "${nom_comm}",
            'fontFamily': "Verdana",
            'fontWeight': "bold",
            'fontSize': "7px",
            'labelOutlineColor': "white",
            'labelOutlineWidth': 1
        })
        }
    );
  map.addLayer(commune);      

 $.getJSON("emprise.geojson", function(data) {
             var geojsonLayer = L.geoJson(data, {
                onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.gid);
  }
});
 geojsonLayer.addTo(map);
 });      
  </script>
  </body>
</html>
1

I don't understand why are you using both libraries, you should choose one - Leaflet or OpenLayers and work with that one. This code isn't working because you didn't defined Leaflet map:

map = L.map('map');

You defined OpenLayers map as map and in this line

geojsonLayer.addTo(map);

you're adding leaflet layer to leaflet map (map) but it can't find L.map defined.

So, the best thing is to use only one library to avoid this kind of conflicts.

  • I agree with againstflow, you can't have a map that will react with openlayers and leaflet functions in the same time. – Below the Radar Aug 29 '14 at 16:44
  • like i said at the start : i wanted to use the "best" of each librairies (i.e. th easiest or what it seems to be for me). And I thought that mix the two librairies was possible. Work on progress so... – Leehan Sep 1 '14 at 7:17

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.