Hands on

Include a customized map with XYZ Studio in your WIX website

By Shruti Kuber | 07 November 2018

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".


Latitude and Longitude of the Earth

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.Latitude and Longitude from Here We Go
    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 = []
    file = open("result_out.txt", "r") # enter the name of the file received in the downloaded folder
    file.readline()
    for line in file.readlines():
        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)
    
    Use the palces.geojson as your data to upload into your XYZ studio project.

Embedding the map into your website

Once you upload your data layers onto your map and decorate it as per your taste and publish the map by going to project settings. You will also find an option to bookmark certain parts of your map so that the part is visible as soon as you open the map. On publishing the map, you will get the URL of the published map and the embed code of the same.

On your WIX website editor, chose a place where you want to display the map. Click on the '+' sign to add an element and go to the 'more' section. 
Screen Shot 2018-11-05 at 8.38.01 PM-1Chose the 'Embed a site' option. Click on the 'Enter a Website Address' button and enter the url of the published map.

Screen Shot 2018-11-05 at 8.38.55 PM You will be able to see your XYZ map on your website! Screen Shot 2018-11-05 at 8.39.11 PMIncase you want to use the HTML frame widget, paste the 'Embed' code that you get once you publish the map in the XYZ Studio. 

You can customize this map with multiple layers of data, each layer having a different marker. I have embedded one right in this blog. Take a look at it, scroll, pan zoom and have fun making maps!