CODEWITHSUNDEEP
compiler-errorsopenstreetmapopenlayers-3
DhanaLaxshmi
DhanaLaxshmi

Reputation: 424

ReferenceError: OpenLayers is not defined while using osm layer

I am using openLayer3 and osm for the map now trying to draw polylines on the the map when i do so

1:the poly lines are not displayed and also i am getting the error in browser has ReferenceError: OpenLayers is not defined

Below is the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Rotation example</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
<script>
<!-- code to draw the polyline on the map-->

    var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
    map.addLayer(lineLayer);
    map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
    var points = new Array(
            new OpenLayers.Geometry.Point(103.987305, 1.355333),
            new OpenLayers.Geometry.Point(103.987262, 1.354432)
    );

    var line = new OpenLayers.Geometry.LineString(points);
    var style = {
        strokeColor: 'white',
        strokeOpacity: 0.5,
        strokeWidth: 5
    };
    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
    lineLayer.addFeatures([lineFeature]);

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
          lineLayer 
        ],

        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false,

            })
        }),
        view: new ol.View({
            center: ol.proj.fromLonLat([103.986908, 1.353199]),
            rotation: 68*Math.PI/180,
            zoom: 18
        })
    });



</script>

</body>
</html>

I am a newbie please say where i am going wrong

Upvotes: 2

Views: 14133

Answers (2)

DhanaLaxshmi
DhanaLaxshmi

Reputation: 424

<!DOCTYPE html>
<html>
<head>
    <title>Rotation example</title>
</head>
<body>
<div style="width:80%; height:80%; position:fixed; border: 1px solid;" id="map"></div>
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
<script>

    var lineString = new ol.geom.LineString([
        [103.985150, 1.349480],
        [103.985656, 1.350743]
    ]);
    lineString.transform('EPSG:4326', 'EPSG:3857');

    var lineLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: lineString,
                name: 'Line'
            })]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'yellow',
                opacity: 0.5,
                width: 15
            })
        })
    });

    var view = new ol.View({
        center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326','EPSG:3857'),
        zoom: 18
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            lineLayer
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }),
        view: view
    });



</script>

</body>
</html>

Upvotes: 1

itsyahani
itsyahani

Reputation: 438

Note that OpenLayers 2 and 3 have different APIs. Your code is in OpenLayers 2 and you have loaded OpanLayers 3(ol.js) script. For ol3 example, look at the source here . If you are using OpenLayers 2, use following syntax to declare the map.

<!DOCTYPE html>
<html>
<head>
<title>Rotation example</title>
</head>
<body>
<div id="map" class="map"></div>
<script src="http://dev.openlayers.org/OpenLayers.js"></script>
<script>
<!-- code to draw the polyline on the map-->

var   map = new OpenLayers.Map({
   div: "map",
  allOverlays: true
});

var osm = new OpenLayers.Layer.OSM();
var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});

// note that first layer must be visible
map.addLayers([osm, gmap]);

map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();



</script>

</body>
</html>

Upvotes: 1

Related Questions