Example #1
0
File: map.js Project: NAMD/SegPub
 pointToLayer: function (feature, latlng) {
     return L.marker(latlng, {
         icon:L.icon({
             iconUrl: '/images/iconmonstr-warning-2-icon.svg',
             iconSize: [30, 30],
         })
     });
 }
    createEventingMarker: function(featureId, latlng, image) {
        var CustomMarker = L.Marker.extend({
            attributes: {
                id: featureId
            }});

        var featureIcon = L.icon({iconUrl: image.getUrl()});
        return new CustomMarker(latlng, {icon: featureIcon});
    },
 var drawBillboard = function(image, dataurl) {
     iconOptions.iconUrl = dataurl || image;
     if (!defined(iconOptions.iconSize)) {
         iconOptions.iconSize = [image.width * scale, image.height * scale];
     }
     var w = iconOptions.iconSize[0], h = iconOptions.iconSize[1];
     var xOff = (w/2)*(1-horizontalOrigin) - pixelOffset.x;
     var yOff = (h/2)*(1+verticalOrigin) - pixelOffset.y;
     iconOptions.iconAnchor = [xOff, yOff];
     marker.setIcon(L.icon(iconOptions));
 };
Example #4
0
export const getSearchMarker = data => {
  return L.marker(
    new L.LatLng(data.lat, data.lng),
    {
      icon: L.icon({
        iconUrl: searchMarker,
        iconSize: [50, 42],
        iconAnchor: [12.5, 40]
      })
    }
  )
}
Example #5
0
 addFootprintsOnMap(travel){
     const markerIcon = L.icon({
         iconUrl: '/assets/redMarker.png',
         iconSize: [15, 25],
     });
     let layerGroup = L.markerClusterGroup();
     travel.footprints && travel.footprints.map(footprint=>{
         return layerGroup.addLayer(L.marker(footprint, {icon: markerIcon}));
     });
     layerGroup.id = travel._id;
     layerGroup.addTo(map_TravelList);
 }
Example #6
0
function getMarkerIcon(inEditMode, className) {
    var whichIcon = shouldUseTreeIcon ? '' : 'droplet_',
        url = config.staticUrl + 'img/mapmarker_' + whichIcon +
            (inEditMode ? 'editmode.png' : 'viewmode.png');
    return L.icon({
        iconUrl: url,
        // Use half actual size to look good on IOS retina display
        iconSize: [78, 75],
        iconAnchor: [36, 62],
        className: className
    });
}
Example #7
0
			addMapMarker: function(map , lat , long, message) {
			    var positionIcon = L.icon({
			        iconUrl: contextPath +'/resources/img/flatMarker3.png',
			        iconSize: [22, 26],
			      }),
			      marker = L.marker([lat , long], {
				        	icon: positionIcon
			      }).addTo(map);
			    
			    if(message)
			    	marker.bindPopup(message);
			      
			},
Example #8
0
export const getMarker = data => {
  return L.marker(
    new L.LatLng(data.lat, data.lng),
    {
      icon: L.icon({
        iconUrl: FILTER_ICONS[data.filter],
        iconSize: [75, 75],
        iconAnchor: [32, 32],
        popupAnchor: [7, -19]
      }),
      zIndexOffset: (data.filter == 'WORKSHOP' ? 9000 : (data.filter == 'MACHINE' ? 8000 : 0))
    }
  )
}
Example #9
0
 transclude(function(html) {
   var options = scope.llDivIcon || {};
   options.elm = Array.prototype.filter.call(html, function(i) {
     return i.nodeType !== Node.TEXT_NODE;
   })[0];
   var icon = L.icon(options);
   icon.createIcon = function() {
     this._setIconStyles(this.options.elm, 'icon');
     return this.options.elm;
   };
   llMarker.getMarker().then(function(marker) {
     marker.setIcon(icon);
   });
 });
Example #10
0
 createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
     var pinColor = color.substr(1);
     var icon = L.icon({
         iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
         iconSize: [21, 34],
         iconAnchor: [10, 34],
         popupAnchor: [0, -34],
         shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
         shadowSize: [40, 37],
         shadowAnchor: [12, 35]
     });
     var iconInfo = {
         size: [21, 34],
         icon: icon
     };
     onMarkerIconReady(iconInfo);
 }
Example #11
0
    renderAllFootprintsOnMap(){
        const markerIcon = L.icon({
            iconUrl: '/assets/redMarker.png',
            iconSize: [15, 25],
        });

        this.props.travelList && this.props.travelList.map(travel => {
            let footprints = travel.footprints;
            let layerGroup = L.markerClusterGroup();
            footprints && footprints.map(footprint=>{
                return layerGroup.addLayer(L.marker(footprint, {icon: markerIcon}));
            });
            //id is used to find that layerGroup and delete it including all its markers.
            layerGroup.id = travel._id;
            return layerGroup.addTo(map_TravelList);
        });
    }
Example #12
0
        setMarkerIcon: function () {
            var iconName = this.get('markerIcon');

            var icon = L.icon({
                iconUrl: '/images/markers/' + iconName + '.png',
                iconRetinaUrl: '/images/markers/' + iconName + '@2x.png',
                iconSize: [26, 32],
                iconAnchor: [13, 32],
                popupAnchor: [-0, -30]
            });

            try {
                this.marker.setIcon(icon);
            }
            catch (e) {
                Raven.captureException(e, {extra: {message: 'Could not set marker icon'}});
            }
        },
Example #13
0
    tweets.each(function(tweet) {
      //TODO: bring in the marker image as asset
      markersArray
      .push(L.marker([tweet.getLat(), tweet.getLng()],
      {icon : L.icon({iconUrl: 'http://www.business-school.ed.ac.uk/blogs/ctc2014/wp-content/uploads/sites/8/leaflet-maps-marker-icons/map-marker.png', iconSize: [24,22]}) })
      .bindPopup('<div class="infowindow"><img src="'+ tweet.getMedia() +'" class="tweetpic"><h1>'+ tweet.getScreenName() +':</h1><p>' + tweet.get('text') +'</p></div>')
      .addTo(this.map));

      boundsToFit.push([tweet.getLat(), tweet.getLng()]);

      tweetsPolyline = new L.polyline(boundsToFit, {
        color: 'red',
        weight: 3,
        opacity: 0.5,
        smoothFactor: 1,
      });

    }, this);
Example #14
0
  componentDidMount: function () {
    var map = L.map('map', {minZoom: 2}).setView(this.state.position, 2);

    L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic3RhdGVvZnNhdGVsbGl0ZSIsImEiOiJlZTM5ODI5NGYwZWM2MjRlZmEyNzEyMWRjZWJlY2FhZiJ9.omsA8QDSKggbxiJjumiA_w.', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var geo_extent = this.props.data.geo_extent;
    var coordinates = geo_extent.geometry.coordinates;
    L.Icon.Default.imagePath = 'assets/images/';
    var icon = L.icon({
      iconUrl: 'assets/images/blurred-marker.png',
      shadowUrl: 'assets/images/blurred-marker.png',
      iconSize: [60, 60],
      shadowSize: [10, 10],
      iconAnchor: [30, 30],
      shadowAnchor: [5, 5]
    });

    L.geoJson(geo_extent).addTo(map);
    if (geo_extent.geometry.type === 'MultiPolygon') {
      coordinates.forEach(function (feature) {
        var poly = polygon(feature);
        var c = centroid(poly);
        L.marker(R.reverse(c.geometry.coordinates), {icon: icon}).addTo(map);
      });
    } else {
      var poly = polygon(coordinates);
      var c = centroid(poly);
      L.marker(R.reverse(c.geometry.coordinates), {icon: icon}).addTo(map);
    }

    // force km stats to clear left if too large for container
    var roadCountLength = Number(this.props.data.total_road_count_add).toFixed().length;
    var waterCountLength = Number(this.props.data.total_waterway_count_add).toFixed().length;
    if (roadCountLength > 3 || waterCountLength > 3) {
      this.setState({kmStatsStyle: {clear: 'left'}});
    }

    this.setState({
      map: map
    });
  },
Example #15
0
    _parseIcon: function (icon, type, marker) {
        if (icon === "default" || icon === "complete") {
            return icons[type];
        }

        if (icon === "empty" || icon === "incomplete") {
            return icons[type + "-empty"];
        }

        if (marker) {
            if (!icons[marker.file_id]) {
                icons[marker.file_id] = L.icon({
                    iconUrl: "https://render.guildwars2.com/file/" + marker.signature + "/" + marker.file_id + ".png",
                    iconSize: [32, 32]
                });
            }
            return icons[marker.file_id];
        }

        return icon || icons[type];
    },
function iconFromColor(color) {
	const urls = {
		red 	: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png',
		blue 	: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
		orange 	: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/orange-dot.png',
		yellow 	: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png',
		purple 	: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/purple-dot.png',
		pink 	: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png',
		green 	: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png',
		ltblue  : 'https://www.google.com/mapfiles/ms/micons/ltblue-dot.png',
		test    : 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
	};
	if (!Object.prototype.hasOwnProperty.call(urls, color)) {
		throw new Error(`Invalid color: ${color}`);
	}
	const icon = L.icon({
		iconUrl: urls[color],
		iconSize: [11, 21],
		iconAnchor: [5, 21],
		popupAnchor: [-3, -76],
	});
	return icon;
}
  _createIcon: function (options) {
    var width = this.pixelValue(options.width);
    var height = width;
    if (options.height) {
      height = this.pixelValue(options.height);
    }
    var xOffset = width / 2.0;
    var yOffset = height / 2.0;

    if (options.xoffset) {
      xOffset += this.pixelValue(options.xoffset);
    }
    if (options.yoffset) {
      yOffset += this.pixelValue(options.yoffset);
    }

    var icon = L.icon({
      iconUrl: this._iconUrl,
      iconSize: [width, height],
      iconAnchor: [xOffset, yOffset]
    });
    this._icons[options.width.toString()] = icon;
    return icon;
  },
Example #18
0
import React from "react";
import classNames from 'classnames/bind';
import _ from "underscore";
import styles from "./main.less";
import L from "leaflet";
import MaleIconImg from './images/male_icon.png';
import FemaleIconImg from './images/female_icon.png';
import llproviders from "leaflet-providers";


const maleIcon = L.icon({
  iconUrl:      MaleIconImg,
  iconSize:     [50, 48],
  iconAnchor:   [25, 47],
  popupAnchor:  [0, -48]
});

const femaleIcon = L.icon({
  iconUrl:      FemaleIconImg,
  iconSize:     [50, 50],
  iconAnchor:   [25, 49],
  popupAnchor:  [0, -48]
});


const Main = React.createClass({
  componentDidMount: function(){
    this._setupMap();
    this._renderMarkers(this.props.spies);
    this._fitBounds(this.props.spies);
  },
Example #19
0
import React from 'react';
import Relay from 'react-relay';
import L from 'leaflet';

var osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
var hereYouAre = L.icon({
    iconUrl: '/stylesheets/icons/here-you-are.svg',
    iconRetinaUrl: '/stylesheets/icons/here-you-are.svg',
    iconSize: [30, 30],
    iconAnchor: [15, 30],
});
var restaurantMarker = L.icon({
  iconUrl: '/stylesheets/icons/restaurant-marker.svg',
  iconRetinaUrl: '/stylesheets/icons/restaurant-marker.svg',
  iconSize: [30, 30],
  iconAnchor: [15, 30],
});
var burgerMarker = L.icon({
  iconUrl: '/stylesheets/icons/burger-marker.svg',
  iconRetinaUrl: '/stylesheets/icons/burger-marker.svg',
  iconSize: [30, 30],
  iconAnchor: [15, 30],
});
var lollipopMarker = L.icon({
  iconUrl: '/stylesheets/icons/lollipop-marker.svg',
  iconRetinaUrl: '/stylesheets/icons/lollipop-marker.svg',
  iconSize: [30, 30],
  iconAnchor: [15, 30],
Example #20
0
'use strict';
var L = require('leaflet');
require('leaflet_marker_green');

var selectedIcon = L.icon({
    iconUrl: L.Icon.Default.imagePath + 'marker-icon-green.png'
});

module.exports = selectedIcon;
Example #21
0
 dojoArray.forEach(this.markerImages, imageObj => {
     const markerIcon = Leaflet.icon({
         iconUrl: window.mx.appUrl + imageObj.enumImage,
     });
     this._markerImages[ imageObj.enumKey ] = markerIcon;
 });
Example #22
0
    request.doRequest(urlForAPI, function (json) {
        routeResultsDiv.html("");
        if (json.message) {
            var tmpErrors = json.message;
            console.log(tmpErrors);
            if (json.hints) {
                for (var m = 0; m < json.hints.length; m++) {
                    routeResultsDiv.append("<div class='error'>" + json.hints[m].message + "</div>");
                }
            } else {
                routeResultsDiv.append("<div class='error'>" + tmpErrors + "</div>");
            }
            return;
        }

        function createClickHandler(geoJsons, currentLayerIndex, tabHeader, oneTab, hasElevation, useMiles) {
            return function () {

                var currentGeoJson = geoJsons[currentLayerIndex];
                mapLayer.eachLayer(function (layer) {
                    // skip markers etc
                    if (!layer.setStyle)
                        return;

                    var doHighlight = layer.feature === currentGeoJson;
                    layer.setStyle(doHighlight ? highlightRouteStyle : alternativeRouteStye);
                    if (doHighlight) {
                        if (!L.Browser.ie && !L.Browser.opera)
                            layer.bringToFront();
                    }
                });

                if (hasElevation) {
                    mapLayer.clearElevation();
                    mapLayer.addElevation(currentGeoJson, useMiles);
                }

                headerTabs.find("li").removeClass("current");
                routeResultsDiv.find("div").removeClass("current");

                tabHeader.addClass("current");
                oneTab.addClass("current");
            };
        }

        var headerTabs = $("<ul id='route_result_tabs'/>");
        if (json.paths.length > 1) {
            routeResultsDiv.append(headerTabs);
            routeResultsDiv.append("<div class='clear'/>");
        }

        // the routing layer uses the geojson properties.style for the style, see map.js
        var defaultRouteStyle = {color: "#00cc33", "weight": 5, "opacity": 0.6};
        var highlightRouteStyle = {color: "#00cc33", "weight": 6, "opacity": 0.8};
        var alternativeRouteStye = {color: "darkgray", "weight": 6, "opacity": 0.8};
        var geoJsons = [];
        var firstHeader;

        // Create buttons to toggle between SI and imperial units.
        var createUnitsChooserButtonClickHandler = function (useMiles) {
            return function () {
                mapLayer.updateScale(useMiles);
                ghRequest.useMiles = useMiles;
                resolveAll();
                routeLatLng(ghRequest);
            };
        };

        if(json.paths.length > 0 && json.paths[0].points_order) {
            mapLayer.clearLayers();
            var po = json.paths[0].points_order;
            for (i = 0; i < po.length; i++) {
                setFlag(ghRequest.route.getIndex(po[i]), i);
            }
        }

        for (var pathIndex = 0; pathIndex < json.paths.length; pathIndex++) {
            var tabHeader = $("<li>").append((pathIndex + 1) + "<img class='alt_route_img' src='img/alt_route.png'/>");
            if (pathIndex === 0)
                firstHeader = tabHeader;

            headerTabs.append(tabHeader);
            var path = json.paths[pathIndex];
            var style = (pathIndex === 0) ? defaultRouteStyle : alternativeRouteStye;

            var geojsonFeature = {
                "type": "Feature",
                "geometry": path.points,
                "properties": {
                    "style": style,
                    name: "route",
                    snapped_waypoints: path.snapped_waypoints
                }
            };

            geoJsons.push(geojsonFeature);
            mapLayer.addDataToRoutingLayer(geojsonFeature);
            var oneTab = $("<div class='route_result_tab'>");
            routeResultsDiv.append(oneTab);
            tabHeader.click(createClickHandler(geoJsons, pathIndex, tabHeader, oneTab, request.hasElevation(), request.useMiles));

            var routeInfo = $("<div class='route_description'>");
            if (path.description && path.description.length > 0) {
                routeInfo.text(path.description);
                routeInfo.append("<br/>");
            }

            var tempDistance = translate.createDistanceString(path.distance, request.useMiles);
            var tempRouteInfo;
            if(request.isPublicTransit()) {
                var tempArrTime = moment(ghRequest.getEarliestDepartureTime())
                                        .add(path.time, 'milliseconds')
                                        .format('LT');
                if(path.transfers >= 0)
                    tempRouteInfo = translate.tr("pt_route_info", [tempArrTime, path.transfers, tempDistance]);
                else
                    tempRouteInfo = translate.tr("pt_route_info_walking", [tempArrTime, tempDistance]);
            } else {
                var tmpDuration = translate.createTimeString(path.time);
                tempRouteInfo = translate.tr("route_info", [tempDistance, tmpDuration]);
            }

            routeInfo.append(tempRouteInfo);

            var kmButton = $("<button class='plain_text_button " + (request.useMiles ? "gray" : "") + "'>");
            kmButton.text(translate.tr2("km_abbr"));
            kmButton.click(createUnitsChooserButtonClickHandler(false));

            var miButton = $("<button class='plain_text_button " + (request.useMiles ? "" : "gray") + "'>");
            miButton.text(translate.tr2("mi_abbr"));
            miButton.click(createUnitsChooserButtonClickHandler(true));

            var buttons = $("<span style='float: right;'>");
            buttons.append(kmButton);
            buttons.append('|');
            buttons.append(miButton);

            routeInfo.append(buttons);

            if (request.hasElevation()) {
                routeInfo.append(translate.createEleInfoString(path.ascend, path.descend, request.useMiles));
            }

            routeInfo.append($("<div style='clear:both'/>"));
            oneTab.append(routeInfo);

            if (path.instructions) {
                var instructions = require('./instructions.js');
                oneTab.append(instructions.create(mapLayer, path, urlForHistory, request));
            }

            var detailObj = path.details;
            if(detailObj && request.api_params.debug) {
                // detailKey, would be for example average_speed
                for (var detailKey in detailObj) {
                    var pathDetailsArr = detailObj[detailKey];
                    for (i = 0; i < pathDetailsArr.length; i++) {
                        var pathDetailObj = pathDetailsArr[i];
                        var firstIndex = pathDetailObj[0];
                        var value = pathDetailObj[2];
                        var lngLat = path.points.coordinates[firstIndex];
                        L.marker([lngLat[1], lngLat[0]], {
                            icon: L.icon({
                                iconUrl: './img/marker-small-blue.png',
                                iconSize: [15, 15]
                            }),
                            draggable: true,
                            autoPan: true
                        }).addTo(mapLayer.getRoutingLayer()).bindPopup(detailKey + ":" + value);
                    }
                }
            }
        }
        // already select best path
        firstHeader.click();

        mapLayer.adjustMapSize();
        // TODO change bounding box on click
        var firstPath = json.paths[0];
        if (firstPath.bbox && doZoom) {
            var minLon = firstPath.bbox[0];
            var minLat = firstPath.bbox[1];
            var maxLon = firstPath.bbox[2];
            var maxLat = firstPath.bbox[3];
            var tmpB = new L.LatLngBounds(new L.LatLng(minLat, minLon), new L.LatLng(maxLat, maxLon));
            mapLayer.fitMapToBounds(tmpB);
        }

        $('.defaulting').each(function (index, element) {
            $(element).css("color", "black");
        });
    });
Example #23
0
$('[name=basemap]').change(function () {
	switchBasemap(this.value);
});



// set the position and zoom level of the map
map.setView(new L.LatLng(46.8, 3.8), 3);



// icon for the routing machine
var startRicon = L.icon({
	iconUrl: 'styles/images/pinstart.png',
	iconRetinaUrl: 'styles/images/pinstart.png',
	iconSize: [36, 47],
	iconAnchor: [18, 47],
	popupAnchor: [0, -48]
});
var dropUicon = L.icon({
	iconUrl: 'styles/images/pinpoi.png',
	iconRetinaUrl: 'styles/images/pinpoi.png',
	iconSize: [36, 47],
	iconAnchor: [18, 47],
	popupAnchor: [0, -48]
});



// Routing machine features
var sidebarlrm = L.Routing.control({
Example #24
0
map.addControl(L.control.zoom({
    position: 'topright'
}));
//add mapper modal for maximize view
var cols=[],ref={};
var layer = new L.layerGroup();
layer.addTo(map);

L.Icon.Default.imagePath = '/portal/vendor/leaflet/dist/images';

var multiIcon = L.icon({
    iconUrl: '/portal/img/mapmarker.png',
    iconSize: [22, 23],
    iconAnchor: [10, 20],
    popupAnchor: [1, -9],
    shadowUrl: '/portal/vendor/leaflet/dist/images/marker-shadow.png',
    shadowSize: [30,22],
    shadowAnchor: [9,20] 
});

var singleIcon = L.icon({
    iconUrl: '/portal/vendor/leaflet/dist/images/marker-icon.png',
    iconSize: [15, 22],
    iconAnchor: [10, 20],
    popupAnchor: [-3, -9],
    shadowUrl: '/portal/vendor/leaflet/dist/images/marker-shadow.png',
    shadowSize: [30,22],
    shadowAnchor: [12,20]    
});
Example #25
0
import React from 'react';
import cloneWithProps from 'react-addons-clone-with-props';
import Relay from 'react-relay';
import classnames from 'classnames';
import request from 'superagent';
import L from 'leaflet';
import Loading from '../icons/loading';

var osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';

var hereYouAre = L.icon({
    iconUrl: '/stylesheets/icons/here-you-are.svg',
    iconRetinaUrl: '/stylesheets/icons/here-you-are.svg',
    iconSize: [30, 30],
    iconAnchor: [15, 30],
});

var address;

export default class Map extends React.Component {

  constructor(props, context) {
    super(props, context);
    address = {
      latlng: localStorage.restaurantLocation ? JSON.parse(localStorage.restaurantLocation) : localStorage.geolocation ? JSON.parse(localStorage.geolocation) : '',
      street: 'restaurant street',
      city: 'restaurant city',
      zipCode: 'ZIP code',
      country: 'restaurant country'
    };
LeafletGeomVisualizer.prototype._updateLabel = function(entity, time, entityHash, entityDetails) {
    var labelGraphics = entity._label;
    var featureGroup = this._featureGroup;
    var position, marker;

    var details = entityDetails.label;
    if (!defined(details)) {
        details = entityDetails.label = {
            layer: undefined
        };
    }

    var geomLayer = details.layer;

    var show = entity.isAvailable(time) && Property.getValueOrDefault(labelGraphics._show, time, true);
    if (show) {
        position = Property.getValueOrUndefined(entity._position, time);
        show = defined(position);
    }
    if (!show) {
        cleanLabel(entity, featureGroup, entityDetails);
        return;
    }

    var cart = Ellipsoid.WGS84.cartesianToCartographic(position);
    var latlng = L.latLng( CesiumMath.toDegrees(cart.latitude), CesiumMath.toDegrees(cart.longitude) );
    var text = Property.getValueOrDefault(labelGraphics._text, time, undefined);
    var font = Property.getValueOrDefault(labelGraphics._font, time, undefined);
    var scale = Property.getValueOrDefault(labelGraphics._scale, time, 1.0);
    var fillColor = Property.getValueOrDefault(labelGraphics._fillColor, time, defaultColor);
    var verticalOrigin = Property.getValueOrDefault(labelGraphics._verticalOrigin, time, 0);
    var horizontalOrigin = Property.getValueOrDefault(labelGraphics._horizontalOrigin, time, 0);
    var pixelOffset = Property.getValueOrDefault(labelGraphics._pixelOffset, time, Cartesian2.ZERO);

    var iconOptions = {
        text: text,
        font: font,
        color: fillColor.toCssColorString(),
        scale: scale,
        horizontalOrigin: horizontalOrigin,  //value: left, center, right
        verticalOrigin: verticalOrigin      //value: bottom, center, top
    };

    var redrawLabel = false;
    if (!defined(geomLayer)) {
        var markerOptions = {icon: L.icon({iconUrl: tmpImage})};
        marker = L.marker(latlng, markerOptions);
        marker.on('click', featureClicked.bind(undefined, this, entity));
        marker.on('mousedown', featureMousedown.bind(undefined, this, entity));
        featureGroup.addLayer(marker);
        details.layer = marker;
        redrawLabel = true;
    } else {
        marker = geomLayer;
        if (!marker._latlng.equals(latlng)) {
            marker.setLatLng(latlng);
        }
        for (var prop in iconOptions) {
            if (iconOptions[prop] !== marker.options.icon.options[prop]) {
                redrawLabel = true;
                break;
            }
        }
    }

    if (redrawLabel) {
        var drawBillboard = function(image, dataurl) {
            iconOptions.iconUrl = dataurl || image;
            if (!defined(iconOptions.iconSize)) {
                iconOptions.iconSize = [image.width * scale, image.height * scale];
            }
            var w = iconOptions.iconSize[0], h = iconOptions.iconSize[1];
            var xOff = (w/2)*(1-horizontalOrigin) - pixelOffset.x;
            var yOff = (h/2)*(1+verticalOrigin) - pixelOffset.y;
            iconOptions.iconAnchor = [xOff, yOff];
            marker.setIcon(L.icon(iconOptions));
        };

        var canvas = writeTextToCanvas(text, {fillColor: fillColor, font: font});
        var imageUrl = canvas.toDataURL();

        var img = new Image();
        img.onload = function() {
            drawBillboard(img, imageUrl);
        };
        img.src = imageUrl;
    }
};
Example #27
0
            Leaflet.control.locate({
                position: this.locateControlPosition,
                drawCircle: this.locateControlDrawCircle,
                keepCurrentZoomLevel: this.locateControlKeepZoomLevel,
                icon: 'glyphicon glyphicon-screenshot', // Using glyphicons that are part of Mendix
                iconLoading: 'glyphicon glyphicon-refresh',
            }).addTo(this._map);
        }

        if (this.geocoderControl) {
            this._addGeoCoder();
        }

        if (this.markerDefaultImage) {
            const defaultMarkerIcon = Leaflet.icon({
                iconUrl: window.mx.appUrl + this.markerDefaultImage,
            });
            Leaflet.Marker.prototype.options.icon = defaultMarkerIcon;
        }

        if (1 < this.markerImages.length) {
            dojoArray.forEach(this.markerImages, imageObj => {
                const markerIcon = Leaflet.icon({
                    iconUrl: window.mx.appUrl + imageObj.enumImage,
                });
                this._markerImages[ imageObj.enumKey ] = markerIcon;
            });
        }

        this._map.addLayer(this._getMapLayer());
        this._map.setZoom(this.lowestZoom); // trigger setzoom to make sure it is rendered