I have a few map markers that are located all over the place and I want to auto zoom to show them all.
The code I have should work fine but sometimes (seems to depend whereabouts the map markers are) it doesn't always zoom correctly to show the markers.
Here's a fiddle (with example markers to show the problem): http://jsfiddle.net/amnesia7/9YUVe/embedded/result/ using the following marker locations:
// Add markers to the map for each location
addMarker(1, "Hello 1", [-18,178.333]);
addMarker(2, "Hello 2", [-18.5,180]);
addMarker(3, "Hello 3", [-18.5,-178.333]);
The auto-zoom has gone completely wrong and seems to be zoomed in on the sea somewhere.
Looks to be a bug to me because it seems to depend on whereabouts the map markers are as to whether it zoom correctly or not.
UPDATE
I've created, what I hope will be, a simpler version using the HERE developer demo for "Zoom to a set of markers"
http://jsfiddle.net/amnesia7/uhZVz/
You need to zoom the map out to see the markers that should be in view by default.
Thanks
It looks like a bug to me too, and only occurs when markers cluster around the 180th line of longitude.
Seems that the zoomTo() calculation is incorrect in this case, only taking in to account the last marker since it is on the "wrong" side of the international date line.
Anyway, getWidth() on the viewport does seem to work, so you could hack in your own zoomTo() function as shown in the kludge below.
Also note the use of kml=auto&map=js-p2d-dom when loading the library - this uses the DOM implementation rather than the canvas implementation this properly shows markers on both sides of the 180th line of longitude.
<!DOCTYPE HTML SYSTEM>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
}
#mapContainer {
width:100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
</style>
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?kml=auto&map=js-p2d-dom"></script>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
/* Set authentication token and appid
* WARNING: this is a demo-only key
* please register on http://api.developer.nokia.com/
* and obtain your own developer's API key
*/
nokia.Settings.set("appId", "APP_ID");
nokia.Settings.set("authenticationToken", "TOKEN");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: [52.51, 13.4],
zoomLevel: 13,
components: [
// We add the behavior component to allow panning / zooming of the map
new nokia.maps.map.component.Behavior()
]
});
// We create an instance of Container to store markers per city
var myContainer = new nokia.maps.map.Container();
/* We add all of the city containers to map's object collection so that
* when we add markers to them they will be rendered onto the map
*/
map.objects.add(myContainer);
// We create several of marker for a variety of famous landmarks
var firstMarker = new nokia.maps.map.StandardMarker(
[-18, 178.333],
{ text: 1 }
),
secondMarker = new nokia.maps.map.StandardMarker(
[-18.5, 180],
{ text: 2 }
),
thirdMarker = new nokia.maps.map.StandardMarker(
[-18.5, -178.333],
{ text: 3 }
);
// Add the newly created landmakers per city to its container
myContainer.objects.addAll([firstMarker, secondMarker, thirdMarker]);
/* Now we calculate the bounding boxes for every container.
* A bounding box represents a rectangular area in the geographic coordinate system.
*/
var myBoundingBox = myContainer.getBoundingBox();
zoom = 1;
map.setCenter(myBoundingBox.getCenter());
map.setZoomLevel(zoom);
while (map.getViewBounds().getWidth() > myBoundingBox.getWidth()) {
zoom++;
map.setZoomLevel(zoom);
}
zoom--
map.setZoomLevel(zoom--);
</script>
</body>
</html>
Related
I create a line layer and add it to the map.
But I then need to put this line layer into edit mode the user can stretch and manipulate the line, or whatever shape that I had added to the map.
The only reference I could find in MS Docs is how to put a 'shape' into edit mode, but this does not seem to be relevant and after trying their example, nothing works for me.
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]));
//Create a line layer to render the line to the map.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'blue',
strokeWidth: 5
}));
The code above creates the line, renders it to the map, but when clicking/hovering over the line I can't select it to edit it, really need some help with the missing code to do this. thanks
I think you need to use the drawing module for that. It allows you to create a DrawingManager to edit a shape by setting the mode to edit-geometry.
I reworked a bit your example with the LineString to put it automatically on edit when the map is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AzureMaps</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
type="text/css" />
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css"
type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
<script type='text/javascript'>
function GetMap() {
//Initialize a map instance.
const map = new atlas.Map('myMap', {
view: 'Auto',
center: [-73.972340, 40.743270],
zoom: 13,
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<enter-your-subscription-key>'
}
});
map.events.add('ready', () => {
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
const lineString = new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]);
//Create a line and add it to the data source.
dataSource.add(lineString);
const lineStringShape = dataSource.getShapes()[0];
//Create a line layer to render the line to the map.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: 'blue',
strokeWidth: 5
}));
var drawingManager = new atlas.drawing.DrawingManager(map, {
mode: 'edit-geometry'
});
drawingManager.edit(lineStringShape);
});
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>
Important thing is, you need to reference the atlas-drawing scripts and styles :
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css"
type="text/css" />
You can find more information on the Drawing Manager here.
Edit - Change only color and width
If you want to change only the strokeColor and the strokeWidth of your line string, you don't actually need the drawing manager for that. I would recommend to set expressions on the strokeColor and strokeWidth of your line layer to read the values from the properties of each shape.
The following example displays two line strings with different width and colors :
//Initialize a map instance.
const map = new atlas.Map('myMap', {
view: 'Auto',
center: [-73.972340, 40.743270],
zoom: 13,
//Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<enter-your-subscription-key>'
}
});
map.events.add('ready', () => {
//Create a data source and add it to the map.
const dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);
const firstLineString = new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]);
const secondLineString = new atlas.data.LineString([[-73.972340, 40.733270], [-74.004420, 40.746800]]);
//Create a line and add it to the data source.
dataSource.add(firstLineString);
dataSource.add(secondLineString);
//Add properties on the shapes
const shapes = dataSource.getShapes()
const firstLineStringShape = shapes[0];
firstLineStringShape.addProperty('color', '#ed5a10');
firstLineStringShape.addProperty('strokeWidth', 10);
const secondLineStringShape = shapes[1];
secondLineStringShape.addProperty('color', '#0e41ea');
secondLineStringShape.addProperty('strokeWidth', 5);
//Create a line layer to render the line to the map.
//strokeColor and strokeWidth are defined on the properties of each line string
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
strokeColor: ['get', 'color'],
strokeWidth: ['get', 'strokeWidth']
}));
});
It is still done when the map is ready in this example for convenience, but you can set the properties of a shape whenever you need to update it using either addProperty if your property was never set, or a combination of getProperties and setProperties.
You can find more information on the data driven expressions here : https://learn.microsoft.com/en-us/azure/azure-maps/data-driven-style-expressions-web-sdk
I'm working to develop a mobile app using Ionic.
A bit of background first as to what I am trying to achieve.
I've got a challenging bit of design I am coding in. I am placing an image of fixed height, in the bottom right hand corner of a div which has a flexible height. The text within the div then needs to wrap around the image.
Like this:
What the end result should be like
The HTML and CSS side of things
I've got the CSS and HTML sussed (at least I think!). The HTML is:
//this line is in the head
<style ng-bind-html="myStyles"></style>
//the rest is in the body of the HTML
<div class="score_block">
<div class="description">
<div class="image_container">
<img src="img/emotional_man.png">
</div>
<p>{{area.levelling.description}}</p>
<div class="habits_button">
<button ng-click="$state.go('app.planner')" class="button button-stable button-icon button-block">Plan habits</button>
</div>
</div>
</div>
And the CSS (written using SASS) is like this:
.score_block {
text-align: center;
position: relative;
.description {
text-align: left;
margin: 10px 0;
}
.image_container {
clear: both;
float: right;
width: 100px;
height: 100px;
img {
height: 100px;
width: 100px;
}
}
}
.score_block:before {
content: "";
float: right;
height: 200px;
width: 0;
}
If I change the height of the 'score_block:before' class I can reposition the image just I need.
The Javascript so far
So with the Javascript side of things I'm hoping that if I can figure out the height of the .description div, I can subtract the height of the image from it and tell the CSS how to position the image. I need some AngularJS to do this - I think that's what I need as JQuery doesn't work in Ionic as far as I know.
So far I have JS code that does this:
.controller('emotionalCtrl', function ($scope, $state, AreasService, _) {
//these commented out lines are to show things I have tried but don't work
//var blockH = $(".description").height();
//var descriptionHeight = angular.element('description');
//var number = descriptionHeight('offsetHeight');
var number = 0;
$scope.myStyles = "#habit_area_homepage .score_block:before { height:" + number + "px; }";
})
I'm looking to do a calculation on the variable number and pass that back in. I can manually change the value of number of it works fine so I know everything else is good. I've read some stuff about doing directives etc but all the examples I've seen confuse me. Maybe I need to put a directive in here or something to help me get the height of the .description element but I just can't figure out to do this. I've spent nearly two days getting this far!
I'm pretty new to AngularJS and Ionic so any help would be really appreciated. Thanks!
There are multiple ways to accomplish dynamic styles.
According to your provided code. I recommend you add styles to head.
Run below codes in your controller or "run":
angular.module("app",[]).run(function(){
var stylesTpl="<style>#habit_area_homepage .score_block:before { height:" + number + "px; } </style>";
angular.element(document).find("head").append(stylesTpl);
})
Check this post for built-in directives of angular to achieve dynamic styles:
How do I conditionally apply CSS styles in AngularJS?
If you want to get the height of a specific div, you have two ways:
Assign an id to the div, and use
var element = document.getElementById("id");
console.log(element.offsetHeight);
Use querySelectors, this returns the first and only one element:
var element = document.querySelector(".description");
console.log(element.offsetHeight);
Using directive is also a good way, check:
Get HTML Element Height without JQuery in AngularJS
In my Ionic/Angular mobile app, I have an Uber-like map, where basically the user can drag the map to select a location and there is a marker always pinned in the center.
To achieve that, I followed the instructions from here and here.
So, my HTML looks something like the following:
<ion-view cache-view="false" view-title="Choose location">
<ion-content has-header="true" class="new-meeting" has-bouncing="false">
<div id="chooseLocationMap" class="full-map"></div>
</ion-content>
</ion-view>
The SASS related to that:
.full-map {
width: 100%;
height: 100%;
.center-marker {
position: absolute;
background: url(../img/default-marker.svg) -10px -5px;
top: 50%;
left: 50%;
z-index: 1;
width: 40px;
height: 50px;
margin-top: -50px;
margin-left: -22px;
cursor: pointer;
}
}
And finally, the part of my controller that deals with the map is this:
function initialize() {
var initialPosition = loadStoredPosition();
var mapOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById('chooseLocationMap'), mapOptions);
google.maps.event.addListener(map, 'center_changed', function () {
updateStoredPosition(map.getCenter());
});
var markerDiv = document.createElement('div');
markerDiv.className = 'center-marker';
angular.element(map.getDiv()).append(markerDiv);
}
ionic.Platform.ready(initialize);
As you can see, I have the two methods, loadStoredPosition and updateStoredPosition, which are just retrieving and saving the latitude and longitude to a service.
This is working fine, I can move the map and every time the stored position will be updated correctly.
The problem is that when I leave the view (after selecting a location) and then return (position still remains the same as the last one), it looks like the marker is not pointing to the correct location but a bit further up (it's always the same offset).
Does anyone know why this might be happening?
EDIT:
The marker appears in the correct location the first time that I'm accessing the view. But all the consecutive times that I'm accessing the view, the marker is not pointing in the correct location anymore but a few pixels up. I should also mention that the view is not cached so the map is re-created every time.
Finally, one curious thing I noticed is that the very first time I access this view, the map after it's visible, it does a small bouncing and expands slightly!
ngmap recently added 'custom-marker' for this kind of purpose.
With custom-marker, you can have fully working marker with html. It also responds to all events click, mouseover using google maps API.
This is the example.
https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker-2.html
And this is the code required, https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/custom-marker-2.html.
As you see in the code, there is no Javascript required.
To center a marker, all the time, all you need to do is to add on-center-changed="centerCustomMarker()" to your map directive, and the following to your controller.
$scope.centerCustomMarker = function() {
$scope.map.customMarkers.foo.setPosition(this.getCenter());
}
I try different approach than you asked, but it may worth a try.
GitHub: https://github.com/allenhwkim/angularjs-google-maps
FYI, I am the creator of ngmap.
I have setup a map with polygons around the countries on the map, and want to add an infobox so that on hover some information will be displayed for each country.
I can get infoboxes displaying easy enough without the polygons, but when assigning them to the PolygonOptions class, nothing happens. The docs say that so long as I have the Bing Themes module loaded (Which I do), the infoboxes will show up on hover and click.
There seems to be zero documentation/examples of this, so hoping you clever folks can help out.
Here is some of the relevant code;
var center = this.map.getCenter();
// Create an info box
var infoboxOptions = {
width: 300,
height: 100,
title: 'Testing', // sourceItems.data.dataset[0].data[index].key,
description: "Visits: 20", // + sourceItems.data.dataset[0].data[index].visits,
showPointer: true,
titleClickHandler: this.polygonInfo,
offset: new Microsoft.Maps.Point(-100, 0),
typeName: Microsoft.Maps.InfoboxType.mini,
zIndex: 1000
};
var polyinfobox = new Microsoft.Maps.Infobox(center, infoboxOptions);
var polygonOptions = {
fillColor: Microsoft.Maps.Color.fromHex(fillColour),
strokeColor: Microsoft.Maps.Color.fromHex(fillColour),
strokeThickness: 1,
infobox: polyinfobox
};
var result = new Microsoft.Maps.Polygon(vertices, polygonOptions);
There is a working code sample in the interactive SDK for the Bing Maps V7 control here: http://www.bingmapsportal.com/ISDK/AjaxV7#BingThemeModule6
Note that creating an infobox for each shape is very inefficient and will hurt performance if you have a lot of shapes. A better method is to have one infobox and dynamically populate it's data. I wrote a blog post on this here: http://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/ If you want to use this approach here is a code sample:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map, dataLayer, infobox;
function GetMap()
{
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
credentials: "YOUR_BING_MAPS_KEY"
});
dataLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(dataLayer);
var infoboxLayer = new Microsoft.Maps.EntityCollection();
map.entities.push(infoboxLayer);
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(infobox);
AddData();
}
function AddData(){
var polygon = new Microsoft.Maps.Polygon([
new Microsoft.Maps.Location(45, -110),
new Microsoft.Maps.Location(65, -90),
new Microsoft.Maps.Location(45, -70)]);
polygon.Metadata = {
title: 'Hello',
description: 'World'
};
dataLayer.push(polygon);
Microsoft.Maps.Events.addHandler(polygon, 'click', displayInfobox);
Microsoft.Maps.Events.addHandler(polygon, 'mouseover', displayInfobox);
}
function displayInfobox(e){
if(e.target){
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var loc = map.tryPixelToLocation(point);
infobox.setLocation(loc);
var opt = e.target.Metadata;
if(opt){
if(e.target.getIcon){ //is pushpin
opt.offset = new Microsoft.Maps.Point(0,20);
}else{
opt.offset = new Microsoft.Maps.Point(0,0);
}
opt.visible = true;
infobox.setOptions(opt);
}
}
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
someone knows why I have a completely srewed up layout in my d3 scales while entering or updating array values between 5 and 9 and bigger than 100 ?
I have setted up here the example: http://bl.ocks.org/vertighel/5149663
As you can see from the code and in this picture, the bar chart must not exceed a width of 500px and a color of orange...
but try to insert a value between 5 and 9 or bigger than 100 and you'll see. Let's change the "11" in "9":
width and color scale completely screwed up!
This is the code:
<!doctype html>
<meta charset="utf8"></meta>
<title>Test</title>
<style type="text/css">
li{border: 1px solid white; background-color: steelblue; color: white}
li{width: 50px; text-align:right; }
li:hover{opacity:0.7;}
.clicked{background-color: green}
:invalid{background-color: pink}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<input id="inp" value="1,23,42,20,11,33,21" pattern="(\d+)(,\s*\d+)*" required>
<label for="inp">change me</label>
<h1>click on the bars</h1>
<script>
var list = d3.select("body").append("ul");
update()
d3.select("input").on("change",update)
function update(){
var array = d3.select("input").property("value").split(",")
console.log(array);
var cscale = d3.scale.linear()
.domain(d3.extent(array))
.range(["steelblue","orange"])
var wscale = d3.scale.linear()
.domain(d3.extent(array))
.range(["10px","500px"])
var elem = list.selectAll("li").data(array);
elem.enter()
.append("li")
elem.text(function(d){return d})
.transition()
.style("width", function(d){return wscale(d)})
.style("background-color", function(d){return cscale(d)})
elem.on("click",function(d,i){d3.select("h1").text("list item "+i+" has value "+d)})
elem.exit().remove()
}
</script>
You're seeing this because your numbers aren't actually numbers, but strings. In particular, a "9" is only one character long while all your other "numbers" are two characters long (similarly for "100").
The solution is to convert your strings into integers. One way of doing this is to use the map() function as follows. Replace
var array = d3.select("input").property("value").split(",")
to
var array = d3.select("input").property("value").split(",")
.map(function(d) { return(+d); });
The map() function may or may not be implemented in your setup, see here for more information and an implementation you can use.