injecting a whole javascript in xaml and passing data from code behind - wpf

I am trying to re create a google heat-map in wps. I managed to have it on a web form but I cannot use any web application only wpf.
How can I inject the code below into a browser control and also passing data from a server side method
<script>
var map, heatmap;
function initMap() {
var CenterLat = 56.816918399;
var CenterLong = -4.1826492694;
var ArrMarkers = [];
var ServerData =<%=GetJsonData(); %>;
var Latitude;
var Longitude;
for (var i = 0; i < ServerData.length; i++) {
Latitude = ServerData[i].Latitude;
Longitude = ServerData[i].Longitude;
var marker = { location: new google.maps.LatLng(Latitude, Longitude) };
ArrMarkers.push(marker);
}
var mapCoordinates = {
center: new google.maps.LatLng(CenterLat, CenterLong),
zoom: 7,
mapTypeId: 'satellite'
};
map = new google.maps.Map(document.getElementById('map'), mapCoordinates);
heatmap = new google.maps.visualization.HeatmapLayer({
data: ArrMarkers,
radius: 15,
opacity: 0.5,
map: map
});
}//end InitMap
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
</script>
<script type="text/javascript" async defer src="<%=GetJavaScriptUrl()%>">
</script>
So the first script is what google need to produce a staic map with an overlay and the second script is the google API url which also contains the google API key

Related

Bing Maps API V8 - map.layers.clear() method removes the polyline from map view

Some time ago, the map.layers.clear() method would not remove the polyline from the map, but now, after some Bing update, the polyline is being removed when map.layers.clear() is called. How can I solve this?
Map initialize
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.606209, -122.332071),
zoom: 12
});
Here add pushpins
// Add pushpins
function addPushpins() {
// Generate an array of 10 random pushpins within current map bounds
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
var layer = new Microsoft.Maps.Layer();
layer.add(pushpins);
map.layers.insert(layer);
}
Here is update direction callback
// On update directions callback
function onUpdateDirections() {
map.layers.clear();
}
Call addPushpins function
addPushpins();
Here is the Bing Maps Direction Manager sample code
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function() {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Set Route Mode to driving
directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving
});
// Callback for on update directions
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', onUpdateDirections);
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({
address: 'Redmond',
location: new Microsoft.Maps.Location(47.67683029174805, -122.1099624633789)
});
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({
address: 'Seattle',
location: new Microsoft.Maps.Location(47.59977722167969, -122.33458709716797)
});
directionsManager.addWaypoint(waypoint1);
directionsManager.addWaypoint(waypoint2);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById('printoutPanel')
});
directionsManager.calculateDirections();
});
UPDATE - Removes partials pushpins
// Map initialize
var map, pushpins, layer;
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.606209, -122.332071),
zoom: 12
});
// Here is the Bing Maps Direction Manager sample code
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function() {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Set Route Mode to driving
directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving
});
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({
address: 'Redmond',
location: new Microsoft.Maps.Location(47.67683029174805, -122.1099624633789)
});
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({
address: 'Seattle',
location: new Microsoft.Maps.Location(47.59977722167969, -122.33458709716797)
});
directionsManager.addWaypoint(waypoint1);
directionsManager.addWaypoint(waypoint2);
// Callback for on update directions
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', onUpdateDirections);
directionsManager.calculateDirections();
});
// On update directions callback
function onUpdateDirections() {
clearLayers();
window.setTimeout(function() {
addPushpins();
}, 2000);
}
// Add pushpins
function addPushpins() {
// Generate an array of 10 random pushpins within current map bounds
pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
layer = new Microsoft.Maps.Layer();
layer.add(pushpins);
map.layers.insert(layer);
}
// Clear layers
function clearLayers() {
// map.layers.clear();
if (layer !== undefined) {
var currentPrimitives = layer.getPrimitives();
/* remove those that are Pushpins */
for (var i = 0; i < currentPrimitives.length; i++) {
var entity = currentPrimitives[i];
if (entity instanceof Microsoft.Maps.Pushpin){
layer.remove(entity);
}
}
}
}
This is to be expected. It not clearing in the past would have been considered a bug. If you want to clear your layers, but leave the directions you have two options. Clear the layers before calculating the directions, or clear the individual layer rather than all layers in the map.
You could examine your layer, get the primitives from it and remove only the pins. Something like the following:
var currentPrimitives = layer.getPrimitives();
/* remove those that are Pushpins */
for (var i = 0; i < currentPrimitives.length; i++) {
var entity = currentPrimitives[i];
if (entity instanceof Microsoft.Maps.Pushpin){
layer.remove(entity);
}
}

Add custom marker with store logo in ionic using google map

I am working with ionic and i want to display map marker with store logo. I constructed a default marker and I have lots of store pics or logos which need to be placed within the marker show in above image. I have used cordova geolocation plugin for get current location of user.
Response array like this :
var markers = [{
storeName: "Dib Dab Extract",
profilePic: "img/dibdab.png",
address: "420 Mary Jane Way",
rating: "4",
reviews: "4379",
offer: "100 Free Coins with 1st Purchse",
lat: "53.896408",
long: "-105.991427"
}]
Custom Marker Icon :
var image = {
url: 'img/ic_map_pin_gray.png', // image is 512 x 512
scaledSize: new google.maps.Size(80, 80),
};
Marker set on map like this :
var markerPos = new google.maps.LatLng(record.lat, record.long);
// Add the markerto the map
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: markerPos,
icon: image,
});
Issue is resolved using Custom Marker. I have done code like this and i get exact marker like i want in above question. So i posted this answer that help anyone who want custom marker like this. i have refer https://humaan.com/blog/custom-html-markers-google-maps/
// Map Initilize function
function initMap() {
var options = {
timeout: 10000,
enableHighAccuracy: true
};
$cordovaGeolocation.getCurrentPosition(options).then(function(position) {
var latLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
//Load the markers
loadMarkers();
//});
}, function(error) {
console.log(error);
console.log("Could not get location");
//Load the markers
loadMarkers();
});
}
//load marker using rest api
function loadMarkers() {
CommonService.ShowLoader();
YOUR REST API SERVICE.then(function(res) {
angular.forEach(res, function(value, key) {
var record = value;
console.log(record);
var image = {
url: 'img/ic_map_pin_gray.png', // custom background image (marker pin)
scaledSize: new google.maps.Size(70, 70),
};
var markerPos = new google.maps.LatLng(record.lat, record.long);
//Add the markerto the map
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: markerPos,
icon: image,
});
var img_src = record.profilePic;
var overlay = new CustomMarker(
markerPos,
map, {image: img_src}
);
});
}).catch(function(error, status, headers, config) {
console.log(error);
});
}
//CustomMarker function
function CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.args = args;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('img');
div.src = self.args.image;
div.className = 'marker';
div.style.position = 'absolute';
div.style.cursor = 'pointer';
div.style.width = '35px';
div.style.height = '35px';
div.style.borderRadius = '50%';
if (typeof(self.args.marker_id) !== 'undefined') {
div.dataset.marker_id = self.args.marker_id;
}
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
if (point) {
div.style.left = (point.x - 18) + 'px'; // set custom (i set it as i want to set in map )
div.style.top = (point.y - 56) + 'px'; //set custom (i set it as i want to set in map )
}
};
This worked for me.
marker = new MarkerWithLabel({
position: new google.maps.LatLng(item.latitude, item.longitude),
animation: google.maps.Animation.DROP,
labelContent: "My Job Location",
labelAnchor: new google.maps.Point(10, 38),
labelClass: "markLabelsJob", // the CSS class for the label
labelInBackground: false,
icon: 'img/active-job-pin.png',
map: map
});

How many markers can I import from .js file?

I'm trying to import markers from .js file into my Google Maps.
I use Google Maps Javascript API v3.
If the .js file has too many markers, the map doesn't show any marker.
When I delete some markers in .js file, the map shows all markers from .js file.
What's wrong with this?
I want to import 1,000 ~ 3,000 markers from .js file and show the markers only in the visible bound on the map.
Is there any limitation of the markers while reading .js file?
I don't use JQuery, node.js.
Do I have to callback function? Please help me.
Thanks in advance.
a.html
...
<script src="js/markers.js"></script>
...
<script type="text/javascript">
var mymap; // one map
...
function showMarker(eachLocations) {
// get the center of the map and zoom level
var new_center = mymap.getCenter();
defaultLat = new_center.lat();
defaultLon = new_center.lng();
var zoomLevel = mymap.getZoom();
var marker,i;
var pin_image_url = "/common/images/marker_img.png";
var myMarkerIcon;
var bounds = mymap.getBounds();
var ne = bounds.getNorthEast(); // LatLng of the north-east corner
var sw = bounds.getSouthWest(); // LatLng of the south-west corder
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
// for each location
for (i = 0; i < eachLocations.length; i++) {
// custom marker
myMarkerIcon = new
google.maps.MarkerImage(pin_image_url,null,null,null,new
google.maps.Size(32,37));
if (eachLocations[i][1] >= se.lat() && eachLocations[i][1] <= nw.lat() && eachLocations[i][2] >= nw.lng() && eachLocations[i][2] <= se.lng()) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(eachLocations[i][1], eachLocations[i][2]),
map: mymap,
icon: myMarkerIcon
});
markers.push(marker);
// listner for marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
// click,dblclick,mouseup,mousedown,mouseout
return function() {
// if any infowindow has already shown, hides it and shows the new one
if (infowindow) infowindow.close();
// make the infoWindow of the first marker
infowindow = new google.maps.InfoWindow({
map: mymap,
position: new google.maps.LatLng(eachLocations[i][1], eachLocations[i][2])
});
infowindow.setContent('<div style="width:250px;text-align: center;font-size:10pt;font-family:Arial,Verdana;font-weight:bold";>'+eachLocations[i][0]+'</div>');
infowindow.open(mymap, marker);
}
})(marker, i));
} // end of if the location is in the bounds
} // end of for each locations
} // end of function
function initialize() {
var mapDiv=document.getElementById("mapholder");
var myOptions={
center:new google.maps.LatLng(defaultLat,defaultLon),
zoom:defaultZoomLevel,
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoomControl: true, // by default
zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE},
mapTypeControl:false,
navigationControlOptions:
{style:google.maps.NavigationControlStyle.SMALL}
};
// make map instance
mymap=new google.maps.Map(mapDiv,myOptions);
// Create the DIV to hold the control and
// call the CenterControl() constructor passing in this DIV
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, mymap);
centerControlDiv.index = 1;
mymap.controls[google.maps.ControlPosition.BOTTOM_LEFT].push( centerControlDiv);
getLocation();
google.maps.event.addListener(mymap, 'idle', function(ev){
var new_center = mymap.getCenter();
defaultLat = new_center.lat();
defaultLon = new_center.lng();
// you may have too many markers problem
// so, before sending array, you have to rearrange markers to show
var bounds = mymap.getBounds();
var ne = bounds.getNorthEast(); // LatLng of the north-east corner
var sw = bounds.getSouthWest(); // LatLng of the south-west corder
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
var markers2show = [];
var lengthofarray = myLocations.length;
for (i=0;i<myLocations.length;i++) {
// limit the markers for the new bound
if (myLocations[i][1] >= se.lat() && myLocations[i][1] <= nw.lat() && myLocations[i][2] >= nw.lng() && myLocations[i][2] <= se.lng()) {
markers2show.push(myLocations[i]);
}
}
showMarker(markers2show);
});
// close the previous info window of marker when click the map
google.maps.event.addListener(mymap, 'click', function() {
infowindow.close();
});
showMarker(myLocations);
}
...
<body onload="initialize()">
...
js/markers.js
var myLocations = [
['A Location',37.007756,140.750864],
['B Location',37.111598,140.424843],
['C Location',36.881268,140.025215]
];

Google Map Update dynamically in Angular

http://plnkr.co/edit/Zd9GwG?p=preview
I am working on this google map + angular.js example . I want to change the location center dynamically depend on the variable .i.e. I want to make it dynamic center. Please suggest how to do this ?
I want to do some thing Like this.
// Code goes here
//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui.directives']);
function MapCtrl($scope) {
$scope.lat = 35.120922 ;
$scope.long = -89.97731 ;
var ll = new google.maps.LatLng($scope.lat, $scope.long);
$scope.mapOptions = {
center: ll,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Markers should be added after map is loaded
$scope.onMapIdle = function() {
//alert("DF");
if ($scope.myMarkers === undefined){
var marker = new google.maps.Marker({
map: $scope.myMap,
position: ll
});
$scope.myMarkers = [marker, ];
}
};
$scope.showMarkerInfo = function(marker) {
$scope.myInfoWindow.open($scope.myMap, marker);
};
$scope.changeval = function(){
$scope.lat = 13.0810 ;
$scope.long = 80.2740 ;
};
}
You need to watch for changes in the scope in order to refresh the map.
Demo Plunkr
(just use the input fields above the map to change the center of the map in real time)
The important part is $scope.$watch:
var updateCenter = function() {
var ll = new google.maps.LatLng($scope.lat, $scope.long);
$scope.myMap.panTo(ll);
// eventually more stuff
}
$scope.$watch('lat', updateCenter);
$scope.$watch('long', updateCenter);

AngularJS & Google Map API V3 remove marker from map

I'm rattling my brains here and cannot figure out why this is not working
var lat = Math.round(top_location.geometry.location.lat() * 1000000)/1000000;
var lng = Math.round(top_location.geometry.location.lng() * 1000000)/1000000;
geocode_results[i]['lat'] = lat;
geocode_results[i]['lng'] = lng;
geocode_results[i]['l_type'] = top_location.geometry.location_type;
marker = new google.maps.Marker({
icon: mapIcon,
position: new google.maps.LatLng(lat,lng),
map: map
});
markersArray.push(top_location.address_components[0].long_name);
Using the above created my marker(s) and plots them on my map.
Using the following code to remove the markers from the map
$scope.removemarkers = function() {
console.log($scope);
console.log(markersArray);
if (markersArray && markersArray.length) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray = [];
}
};
I get the following error in console.log()
TypeError: Object AB42 2DL has no method 'setMap'at
Object.$scope.removemarkers
AB42 2DL being a random postcode used when plotting a marker
markersArray doesn't contain markers, it contains strings.
Try this:
markersArray.push(marker);

Resources