XYZ

# Include a customized map with XYZ Studio in your WIX website

By Shruti Kuber | 07 November 2018

### Try HERE Maps

Create a free API key to build location-aware apps and services.

The love for traveling runs in my family!  As a kid, I traveled to a new place twice a year and continue this tradition by making small trips every now and then. Not to brag about it (maybe a little), I keep a note of all the cities I have visited. And what good is it if I can't flaunt it?  I thus wanted to make a visual representation of this list on my WIX powered website. With XYZ Studio you can do this with little or no coding.
To plot places on the map, you need two things:

1. A map
2. Geo-coordinates of the places you need to plot

If you are interested in knowing what geo coordinates are, this article gives a good explanation. In short, If you draw vertical parallel lines on the globe joining the North and the South Pole, and horizontal parallel lines going East to West, that makes the base for the co-ordinate system. Depending on where the place lies w.r.t. these lines, it gets geo coordinates in the form of Latitude:N 52° 31' 51.096",  Longitude:E 13° 23' 5.064".

Yes, the Earth isn't flat!

The base map

The first thing to do would be, sign up for a freemium account on developer.here.com and generate your app_id and app_code. With this account, sign in to the XYZ Studio and create a new project. You will already see a base map and options to customize your base map.

Here you name your project and chose from 3 base map themes. You will then have to add a layer of data to this map. This data will contain the names of the places you wish to display, the geo co-ordinates of those locations, and any additional data you may want to display. You can upload this data in GeoJSON, JSON, CSV and Shapefile formats in the XYZ Studio.

*(If you are uploading a csv file, make sure the columns containing the geo co-ordinates are labelled Latitude and Longitude.)

Getting the data

To generate a file of your data in one of the given formats , we first have to acquire the data. One way to do it is to just list down the names of places that you want to display in either a text file or a spread sheet. Once you have the names of the places, we now need their geo-coordinates. There can be multiple ways of doing this. Let us take a look at them.

1. With no coding whatsoever:
If you have no experience in coding, or want a quick fix to display a few places on the map, simply copy the name of the place and enter it in the search box on the here we go website. Click on the location pin and you will find the Latitude and Longitude of the place in the address bar. Enter these co-ordinates in their respective columns in your spreadsheet.
Add other columns that you wish to like data of visit, country name etc. and save the file with the extension .csv and upload it into your XYZ project. If you want to convert the file into a GeoJSON file, you can use an online converter to do so.

After uploading the file, default circles will appear on the map according to the input data. You can then customize these circles to different sizes and different colors or change them to markers like icons for food, travel, nature, etc.
2. With little coding
If you have a longer list of places and do not want to manually enter the Latitude and Longitude for each one of them, use the HERE Batch Geocoder REST API and get the result in the form of a text file.
You can use a tool like POSTMAN to use this API in the following manner:
Send a POST request as below and use the app_id and app_code obtained during sign up for the same.

https://batch.geocoder.api.here.com/6.2/jobs
?action=run
&app_id={{app_id}}
&app_code={{app_code}}
&mailto={{email_id_personal}}
&indelim=,
&outdelim=,
&outcols=City,Latitude,Longitude,country
&outputcombined=false

The body of the Post should be like:
recId,City,Country
1,Stockholm,Sweden
2,Göteborg,Sweden
3,Antwerp,Belgium
4,Copenhagen,Denmark
5,Santa Cruz de Tenerife,Spain
6,Mallorca,Spain
7,Rennes,France
8,Paris,France

The result of this post will be a job id which you will receive on your mentioned email id. To get the Latiude and Longitude from this job, you need to send a GET request with the job ID and the same app_id and app_code used for the POST request.

https://batch.geocoder.api.here.com/6.2/jobs/{{YOUR_JOB_ID}}/result
?app_id={{app_id}}
&app_code={{app_code}}

Download the resulting zip file. It will contain a text file with Latitude and Longitude of the input location. Save this file as a .csv file (possible as we used a comma ',' as the delimiter). You can insert additional columns of data and then upload the file or add the additional columns once you  upload the data to the XYZ studio.
3. With a little more coding
The result file received from the GET request can be parsed with a simple script and converted into a GeoJSON file or a CSV file.

from geojson import Point, Feature, FeatureCollection, dump
features = []
fname = line.rstrip().split(',') #using rstrip to remove the \n
Latitude,Longitude= map(float, (fname[4], fname[5]))
# in my result_out file, 4th and 5th values were Latitude and Longitude
features.append(Feature(
geometry=Point((Longitude,Latitude)),
# note that the format is Longitude and then Latitude
properties={
"City": fname[3],
"Country": fname[6]
}
)
)
feature_collection = FeatureCollection(features)
with open('places.geojson', 'w') as f:
dump(feature_collection, f)