I am trying to achieve what the following website has: http://clicky.com/stats/?site_id=32020#/stats/locale-map?site_id=32020
You can double click on a country then view that country's states/provinces on the map. This is a really neat feature however I cannot find docs regarding it.
The normal world map looks like this:
http://www.highcharts.com/studies/world-map.htm
So how can I add this 'zooming' functionality which allows me to view sub-states in countries?
At this moment maps are only beta project, all of studies are available here https://github.com/highslide-software/highcharts.com/tree/master/studies. You can try to catch click event on SVG element, and then load "new map" to achieve similar effect.
Related
The following link provided is something that I am after for a web mapping project.
http://developers.arcgis.com/javascript/samples/fl_dgrid/
The following link contains the utilisation of ESRI base layer map, and what seems to be a layer polygon possibly created in Arcmap, which allows users to select individual states, which when selected displays in a table.
I am trying to achieve the similar user interaction but just for Australia; for example, users will be able to select Western Australia, Northern territory est, which would then show which state the user selected in a table and generate data/information.
So far from my understanding, it seems as though ArcGIS for server could have been used in order to save the feature polygon layer, which is then called as a service from the coding and generated onto the base layer map of ESRI.
I am wondering if anyone can help me in terms of how to get this user interaction working just for a map of Australia. Would I create the polygon layer in arcmap, make that as a service using ArcGIS for server and then call it from coding?
Also, for the actual selection of each state and showing in a table, my understanding is javascript is used?
I guess I am just trying to get a more thorough understanding so I can go on from there, in order to create something similar just for Australia. Any help will be much appreciated.
Thanks in advanced.
There are probably a few different ways to go about getting this to work depending on what data you have available to you. My answer is based off what I see in the example you posted.
Assuming you had the polygons for Australia available to you, you should be able to modify the example and have a working version pretty easily.
Grid
For the grid, it looks like they are using the dgrid plugin which unfortunately I have no experience with so you would need to look up info on that.
Map
If you are wanting to have a polygon shown for each state/territory then you would need to have a service with all the polygon objects available to you. Not sure if this is already available or if you would need to create each polygon somehow.
When the map loads you would want to load all the polygons. When a user clicks on a state you would want to create a query to select the given polygon so that it is highlighted (they are using the OBJECTID field in the example which would be unique to each polygon). When selecting the polygon in the map you would also select the row in the grid(This is also done by the ID aka OBJECTID field from the polygon).
I have a leaflet map embedded in my page, but I want to add a control to allow the div with the leaflet map to be resized by the user. I've tried plugins like jquery.ba-resize, twinhelix and one other, but I can't seem to get something working that will allow me to have a button near the div with the leaflet map in it and to resize it on the fly.
Does anyone have any ideas?
Looks like I found an easy answer, I just took the id of my map ('map', creative), and did
$('#map).resizable();
with a jquery-ui plugin on the page.
Good enough for what I wanted!
I am using the Zingchart library to add a map and charts to my website.
For the Map there are some predefined maps included in the library. Is there a way I can define my own map? I am looking for a way to enter the coordinates of the polygons
I want with their name, and they get loaded.
I tried too see how they are done by looking at the source code but I have the minified version and its not very intuitive to figure out how to modify them.
The Zingchart Maps Module docs include a handful country maps as demos. As you said, these are the predefined maps the library comes with. If you load up one of the maps (on their docs page) and right click, their custom context menu should show the option "view source", amongst other export options. Within the result window, you will see the Parsed JSON tab. This JSON object defines the map. For example, an excerpt of Argentina's map definition looks like this:
...
{
"type":"poly",
"id":"NQ",
"points":[[183,180],
[183,181],
[184,182],
[185,182],
[185,183],
[185,184],
[186,185],
[186,185],
...
In order to define you own map, you simply need to mirror this structure. Start by cloning any of the included maps and substitute in your own values for points.
Hope that helps.
i want to add button to my personal app. like google maps has at right side of maps which writing on it Map and on mouseover Earth.
can i do this with openlayers control like OpenLayers.Control.TYPE_TOGGLE with adding listeners or with anything else javascript...?
thanks for your helping
you might want to have a look at this
http://code.google.com/apis/maps/documentation/javascript/controls.html
if you are trying to achieve something like this
http://code.google.com/apis/maps/documentation/javascript/examples/control-custom.html
I have been looking around and haven't found an answer to this yet. Is it possible to add click events to either the 3D building layer or custom 3D models using javascript for the google earth plugin.
My end goal is to be able to have a user select a 3d building and have an information bubble show up with details about that building. This is rather than the default bubble that Google shows with information about the 3D model.
Ideally one would be able to use the 3D buildings layer as opposed to loading the models manually, though I don't have high hopes of that being possible so doing it via manually uploaded 3D models would be a possibility.
I am using the google maps api V3 with the google earth utility library to activate the plugin.
Thanks in advance for any answers.
I think i've overread this the first time. After taking a closer look it reveals that it seems to be still not possible (in that easy way)
google.earth.addEventListener(placemark, 'click', function(event)
{
alert('click');
});
... Mouse events can be attached to most geometries in the plugin (the exception is 3D models), ...
google earth api
Maybe its possible to do that by implementing a custom intersection 'listener'
//EDIT:
Maybe thats not the hole story. more research revealed that it is possible to make a hittest agaignst some geometry. the ge interface has a function named hitTest(...)
api doc
GEHitTestResult GEView.hitTest( float x,
KmlUnitsEnum xUnits,
float y,
KmlUnitsEnum yUnits,
GEHitTestModeEnum mode
)
unfortunately the GEHitTestModeEnum is only suitable for GEPlugin.HIT_TEST_GLOBE GEPlugin.HIT_TEST_TERRAIN
GEPlugin.HIT_TEST_BUILDINGS
so you can hitTest against buildings but not against custom 3D models...
a slightly useable solution to click custom 3D models could be the one described in this issue using other 'eventable' invisible placemarks to detect a click.
litte code excample of hittesting
//EDIT2:
The solution i use in my current project sounds like that:
create a bounding box with polygons for every 'click event recieving custom 3d model'
that polygons can receive click events
google.earth.addEventListener(polygonPlacemark, 'click', function(event) {
alert('placemark bounding box clicked');
});