Wijmo UI for the Web
Add Marks
Wijmo User Guide > Widgets > Maps > User Scenarios > Add Marks

Wijmaps allows you to add marks to the map control. Placemarks enable you to save important places, such as restaurants, hospitals and museums by drawing marks directly on the maps.

Click anywhere on the map to add a new mark and add multiple marks in the same way. Each new mark is connected to the previous one. When you click an existing mark, it is removed from the map.

The following script allows you to add an image to the marks, set its height, width and also the type of vector that you want to display on the map.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijmaps"], function () {
        $(document).ready(function () {
                $("#maps").wijmaps({
                    zoom: 2,
                    layers: [
                    {
                        type: "vector",
                        data: { vectors: [] }
                    },
                    {
                        type: "vector",
                        data: { vectors: [] },
                        placemark: {
                            labelVisibility: "visible",
                            
                            image: "images/google_placemarker.png",
                            size: { width: 50, height: 35 },
                            pinPoint: { x: 24, y: 32 },
                            render: function (d) {
                                return $("<div style='width:50px;height:35px;cursor:pointer;'><img style='position:absolute;left:0px;top:0px;' src='../images/livewidgets/google_placemarker.png' /><div style='color:white;font-size:10pt;position:absolute;top:5px;width:100%;height:100%;text-align:center;'>" + d.vector.data.name + "</div></div>")
                                .on("click", function (e) {
                                    markclicked(e, d.vector.data);
                                });
                            }
                        }
                    }],
                    centerChanged:function() {
                        window.centerChanged = true;
                    }
                }).off(".layer")
                .on("click.layer", function (e) {
                    if (window.centerChanged || e.button !== 0) return;
                    var offset = $("#maps").offset();
                    var point = { x: e.pageX - offset.left, y: e.pageY - offset.top };
                    var geoPoint = $("#maps").wijmaps("viewToGeographic", point);
                    var layers = $("#maps").wijmaps("option", "layers");

                    var layerMark = layers[1];
                    var vector = {
                        type: "placemark",
                        coordinates: [geoPoint.x, geoPoint.y],
                        name: layerMark.data.vectors.length + 1 + ""
                    };
                    layerMark.data.vectors.push(vector);

                    var layerLine = layers[0];
                    var coords = [];
                    var vectors = layerMark.data.vectors;
                    for (var i = 0; i < vectors.length; i++) {
                        var mark = vectors[i];
                        coords.push(mark.coordinates[0]);
                        coords.push(mark.coordinates[1]);
                    }
                    var line = {
                        type: "polyline",
                        coordinates: coords,
                        stroke: "gray",
                        strokeWidth: "2",
                        strokeDashArray: "- "
                    };
                    layerLine.data.vectors[0] = line;

                    $("#maps").wijmaps("refreshLayers");
                })
                .on("mousedown.layer", function (e) {
                    window.centerChanged = false;
                });
            });
        });

        function markclicked(e, d) {
            e.stopPropagation();

            var layers = $("#maps").wijmaps("option", "layers");
            var layerMark = layers[1];
            var vectors = layerMark.data.vectors;
            var index = $.inArray(d, vectors);
            vectors.splice(index, 1);
            for (var i = 0; i < vectors.length; i++) {
                vectors[i].name = i + 1 + "";
            }

            var layerLine = layers[0];
            var coords = [];
            for (var i = 0; i < vectors.length; i++) {
                var mark = vectors[i];
                coords.push(mark.coordinates[0]);
                coords.push(mark.coordinates[1]);
            }
            var line = {
                type: "polyline",
                coordinates: coords,
                stroke: "gray",
                strokeWidth: "2",
                strokeDashArray: "- "
            };
            layerLine.data.vectors[0] = line;

            $("#maps").wijmaps("refreshLayers");

            return false;
        }
    </script>
See Also

Reference