I am new to web technologies, I started looking into HTML, CSS, Java script (I am familiar with these now).
Now I wanted to draw a map (ex: google maps of a certain city) & want to mark my own locations (ex: I want to show all petrol bunks in my city with small petrol bunk Icon) .
So for the above requirement what language and technologies I can use.
can above thing be achieved with the help of HTML & Java script. or do I need to learn & use any other thing. my apologies if i use wrong terminology I am new to web technologies.
Please suggest.
The easiest way to draw interactive map of fuel sites in your city is using google maps api. You should start here https://developers.google.com/maps/documentation/javascript/
And javascript is definitely the language you are looking for. You also gonna need coordinates of every fuel site in your city
this is my example of such map:
https://www.google.com/maps/d/u/0/viewer?mid=1DLGEGzVNBf7IbKZ1h1j-wdI4-vA
I created it using google maps constructor and than placed it on my client's site.
Related
I'm trying to create a custom map using Flutter Web that would be capable of displaying custom statistics for a place for COVID-19.
First we'll have a interface that display statistics for our entire planet:
https://google.com/covid19-map/?hl=en (Just like htisw)
Then the user can click on any country to zoom-in with probably an ease-in transition to see the number of cases in each state or province of that country. Assuming that I am able to fetch the exact co-ordinates of the epicenter in that country, I would like to deepen the shade in those parts in such a way that it lightens out as we move towards areas which have a lower number of cases.
Is it possible in Flutter Web?
I came across this plugin (thanks to this thread on SO Openstreetmap in Flutter?)
https://pub.dev/packages/flutter_map
but it doesn't explicitly say that it supports Flutter Web.
I tried fetching the tiles from OSM(Open Street Map) and displaying the maps on Flutter Web with the help of the example given in the above site https://pub.dev/packages/flutter_map#open-street-map-provider
But it didn't really display anything, maybe because a certain widget or function didn't work as expected.
According to your experience, which is the best way to achieve what I am looking for?
If possible, please describe the answer in such a way as if you were me and trying to do what I am doing.
Flutter_map doesn’t support flutter web.
You may check out the below Flutter Maps widget which has support for all the platforms including web.
https://pub.dev/packages/syncfusion_flutter_maps
Regarding the requirements you have mentioned, you can try the below things.
By dynamically changing the focal point and zoom level based on the click position, the easing effect can be achieved.
https://help.syncfusion.com/flutter/maps/zoom-pan#update-the-zoom-level-programmatically
With the combination of dynamically adding shape sublayers on top of the tile layer and color mapping for that shape sublayers, you may achieve this.
https://help.syncfusion.com/flutter/maps/shape-sublayer#shape-sublayer-on-tile-layer
https://help.syncfusion.com/flutter/maps/shape#range-color-mapping
I try to display a big world map on my website with Javascript and/or Jquery.
The particularity is that I have to set and draw specific region with a custom list of countries. Exemple :
All the countries with French language (France, Belgium, Switzerland etc...)
All the countries with Spanish language (Spain, Columbia etc...)
Then, the visitors would be able to click on these custom areas to get more info. I found a lot of plugins (Google GeoChart, Mapael, Kartograph, jVectorMap) but no one seems to serve my purpose.
I'd like to avoid HTML image map.
Thanks !
Question is pretty broad but I will try my best:
Your best bet is to use the JavaScript API and embed a map in a div, from there you will have access to Google Maps API.
In terms of your implementation, I guess you could go a couple different ways, you could show 2 different markers for Spanish and French countries with click listeners and more info on the country, or you could get more fancy and draw polygons/polylines. If you go Marker route, it's easier so I would recommend that.
I'm using Leaflet library in my ReactJS app and I wonder if there is a simple way to recognize if object clicked by user is a building.
Idea that came up to my mind is to check map colour under clicked position.
Does it make sense?
I appreciate your help.
Colleagues in comments advised to give some use-case:
App I'm working on is meant to mark antique buildings with elevation in bad shape so city architecture management had simpler job of searching for them.
Every user of this App can mark such building. To prevent hooligans from corrupting data with senseless points on map I wanted to validate as a first step if clicked point is a building.
I hope it will clarify problem a little bit.
I wonder if there is a simple way to recognize if object clicked by user is a building.
No.
You basically want to run arbitrary point-in-polygon queries against OSM's building dataset, and I will presume that you don't want to host that dataset yourself.
The simplest way to do this is to perform queries to an Overpass API server, passing a is_in query and filtering by the building tag key. The OSM website's query feature functionality uses such a technique.
With this technique you won't have to worry about hosting the data, just about creating the right Overpass API query. Please bear in mind that the Overpass API servers are run by volunteers and their resources are limited.
The second simplest way would be to download a OSM extract of you area of interest, and run the point-in-polygon queries yourself, by whatever means you like (PostGIS' ST_Intersect, turf.js, etc etc).
If you will be using Leaflet, another approach would be to use vector tiles, and set it up in such a way that the buildings thematic layer is interactive. This will require you to be aware of the limitations of the vector tile servers.
Idea that came up to my mind is to check map colour under clicked position.
That is unreliable. Think about labels on top of buildings, or the colour of the edge of the building area, or buildings that don't render with the standard colour (e.g. places of worship, monuments).
Brief Explanation
I had not noticed this until my designer sent me a PSD of a new website including a Google Maps page with some cool features that I did not recognise...
I then investigated this further to try to find these features and where they came from. Surprisingly, the new features are only visible when you go to the Google maps page on a Mac (I was using Chrome).
See these two different screen shots:
On a Mac
On a PC (Google Maps API)
The Differences
There is a button after the search box
The Mac version has integrated Google Plus and sharing capabilities
The zoom buttons are entirely different
The map type buttons are entirely different
My Question
So with the above in mind, is there any possible way one could make the Google Maps API Map look like the one illustrated in the first image?
I have looked through the API reference and it seems that there is nothing other than a basic search box... I cannot find any information on adding 'sharing' capabilities, or restyling the zoom buttons etc.
Can one come up with an some ingenious solution to this as the design of my clients site rather depends on the features on this map?
It looks like you're being served the updated version on the Mac and the older version on the PC; The user will need to opt-in to the new service on the Google Maps site to overcome this.
If you need more control over the design of your maps then Mapbox might be useful: https://www.mapbox.com
I'm kind of new to this site and programming in general, so please excuse me if I say something incorrectly.
I need to find a list of all the latitude-longitude locations of the bikeshare kiosks in DC. The map with all the stations can be found here. Basically I can't figure out how to do this without manually going in, finding where exactly the kiosk is on the map on the bikeshare website, and then locating it through google maps to find the lat/long (I found out that this can be done by right clicking on the location in google maps). I've searched long and hard to see if there is a database somewhere that has stored this information, or if I can get it from the bikeshare site directly, but I can't find it anywhere.
I can do it for the DC metro station by clicking on the map directly (like here, if you click on the map, you can see a google maps page pop up with the lat/long location).
This is my first time using the Google Maps API. I want to be able to get these locations because I want to depict it onto a custom map of my own using Javascript (which I have also never used before). Any kind of help would be extremely helpful!
Diving a bit into the source code you'll quickly find http://www.capitalbikeshare.com/js/maps.js, and there you can see that the positions are loaded from http://www.capitalbikeshare.com/stations/bikeStations.xml.
You also might have found that using the Network tracker in your browser's debugging console.
http://www.capitalbikeshare.com/stations/bikeStations.xml