Openlayers 3 - can't implement my marker but fill does work

Question

I'm trying to add a marker to my map and it's not working out too well for me. The map and coordinates do work. I added a dot to the location with setFillStrokeStyle which also works, so I assume I'm pretty close to the solution.

<script type="text/javascript">
    var zoomIn = @Model.zoom;

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.MapQuest({ layer: 'osm' })
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([@Model.lng, @Model.lat]),
            zoom: zoomIn
        })
    });

    @*---This part is bugging, can't seem to implement this:--- *@

    map.addOverlay(new ol.Overlay({
        position: ol.proj.fromLonLat([@Model.lng, @Model.lat]),
        element: $('<img src= "/OpenLayers-2.10/img/marker.png">')
            .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
            .tooltip({title: @Model.Location, trigger: 'click'})
    }));

    @* ---This works if I uncomment this---

    map.on('postcompose', function (evt) {
        evt.vectorContext.setFillStrokeStyle(
            new ol.style.Fill({ color: 'rgba(0, 0, 255, .5)' }),
            new ol.style.Stroke({ color: 'rgba(0, 0, 255, .8)', width: 3 }));
        evt.vectorContext.drawCircleGeometry(
            new ol.geom.Circle(ol.proj.fromLonLat([@Model.lng, @Model.lat]), 40));
    });*@

</script>

I based my code on this post: how to add markers with OpenLayers 3

My microsoft edge is giving error message: SCRIPT16386: No such interface supported, ol.js (422,95)

Firefox is giving me: Empty string passed to getElementById(). jquery.unobtrusive-ajax.js:31:20 TypeError: Argument 1 of Node.appendChild does not implement interface Node.

At the loading of the page i upload the ol.js script:

<script src="~/Scripts/ol.js"></script>
<link href="~/OpenLayers-2.10/theme/default/style.css" rel="stylesheet" />
<style>
    .map {
        height: 400px;
        width: 100%;
    }
</style>

Any advice where I'm doing things wrong? Thanks in advance!

score 0 · Answer 1 · answered Apr 11 '16 at 14:38

As of 3.12.0 release of ol (change #4485 https://github.com/openlayers/ol3/pull/4485/files), the element passed to ol.Overlay must be an HTML element, not a jQuery element, so you would need to do something like this to adjust your code for this change:

 var myElement = $('<img src= "/OpenLayers-2.10/img/marker.png">')
            .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
            .tooltip({title: @Model.Location, trigger: 'click'});

 map.addOverlay(new ol.Overlay({
        position: ol.proj.fromLonLat([@Model.lng, @Model.lat]),
        element: myElement[0]
    }));

James, do you get the same error message? Can you confirm that all of the Model values are populated? If you debug through this (firebug recommended), does myElement get properly created or is it undefined? Are there any other JS errors that show up in firebug? — VG1, Apr 18 '16 at 19:56

Openlayers 3 - can't implement my marker but fill does work

1 Answers1