I need to create an interactive map with tooltipster but I don't really know how to begin...
I have a map of the world (a png file) and I need to :
- have a set of "dot" on certain countries
- when the user clicks on a dot it zooms the map and display other dots of given cities.
- When user clicks on a city, it displays a kind of tag with some informations about the city
Is it possible to do that with tooltipster ?
Could anyone help me to start because I don't really know where to start...
Thanks for your help.
First, create an image map if you haven't already.
This online tool will help you do it: https://www.image-map.net
Then when you download the HTML generated by this tool, insert it in your own page.
You will see tags in it, like <area shape="circle" coords="314,105,44" />. You can add a class or an id onto these tags, and operate on them just as if it were a div, as demonstrated in Tooltipster's documentation.
I Hope it helps!
Related
I am fairly new to Wordpress. I am writing a real estate site, and I want to have a Service Area page that displays the Counties that we serve in various states. So what I want to happen is to have a dropdown list where a user can select a state, and based on the state that they select, a text area will display that counties that we service in that state.
So basically, I want to store text content in the form of counties that will be displayed based on the conditions of a dropdown list.
I have no idea where to start. Is there a plugin that works for this kind of situation such as a form plugin that can store content, or am I going to have to write custom PHP/Javascript to make something like this happen. I am asking because this seems like a common scenario on websites, I just don't know where to look.
Thanks for any suggestions that you may have!!
So what I ended up doing was creating a select box in html that when a change happened on the list, a javascript function was called that changed the visibility of a text area and also set the value of its content to display all the counties that I needed. Ended up being much more simple than I expected. No PHP functions and short code necessary.
I'm working on a Wordpress website for a friend and want to put a calendar on a page that when the mouse scrolls over a country for the country to light up and display some information as well as give the user some options to download a pdf about that country.
See http://us.fulbrightonline.org/countries/selectedregion/23 to get an idea of what I mean.
Just need to get a sense of what technologies and tools are needed to make something like this work. I know I will need to utilize an API but the hovering and attaching a pdf to each country is new to me.
You could try to use the Google Geochart API for your problem. It allows to create interactive maps and to capture click events. It also allows to color countries individually and to display tooltips. You can find more information and examples here: https://developers.google.com/chart/interactive/docs/gallery/geochart
I created a plugin for WordPress that uses this API. It integrates all the needed scripts and allows to build a map from the admin panel. You can find more information here:
http://meisterpixel.com/interactive-map-builder/
I have a fully functioning map using the API v3 with markers placed as a result of database searches, and info windows that pop up correctly. So far, so good.
What I would like to do is to allow the user to place a marker on the map manually, i.e by dragging and dropping a placemark in exactly the same way as google "My Maps" uses to build a map or by clicking on the map.
There are several reasons for doing this, but one is that I would like the user to easily identify a centre point of interest so that I can filter searches within a radius of this point.
I would have thought that this option would be useful to others.
Maybe I am using the wrong search terms for this, and the terms "marker" and "placemark" seem to be interchangeable, which doesnt help, but I cannot formulate a search which has even shown that anyone else is trying to do this.
Have you seen this example of the drawing tools, it allows you to add Markers, Polylines and Polygons, you can customize it to just do Markers.
Here is the documentation for the Drawing Manager
When i am searching for some country area in maps on standard web UI it shows me the area borders.
I would like to mark this areas dynamically in embedded map on my website, but i dont know how exactly i have to formulate search query to find if there is some way to achieve this.
I was not found anything about this in reference.
does google offer some API for this in last maps js API?
You need a Polygon-Overlay or a KML-Layer which defines the borders.
I want to make a click-able world map which when a user clicks on a country it directs the user to a url containing the corresponding country code.
e.g you click on the UK and it directs you to .../country.php?c=GB
What would be the best way to go about it? html imagemaps? javascript? flash? Are there scripts already out there? Is there a way to use google maps?
http://davidlynch.org/js/maphilight/docs/demo_world.html#
You can construct such a clickable graphic using SVG.
It's very easy to implement what you want with jVectorMap mapping library. To define an action on country click use a onRegionClick parameter. The country code according to the ISO format is available as a second parameter in the callback.
I would, if I may, suggest to check out Highmaps, from the people behind Highcharts (myself included). It's free for non-commercial use, works great with mobile browsers (full touch support) and old IE down to IE6. It supports advanced dynamic features like drilldown and rich tooltips, and is very customizable.
We supply a map collection with over 350 maps, including several world map versions with ISO-3166-1-alpha-2 metadata embedded.