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>
Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
2
  • 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, 2014 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, 2014 at 7:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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