Skip to main content

Share location

· 2 min read
Stefan Benicke

Share location map with a marker

Nowadays "share location" is one of the basic features in mobile chat applications.

When share location is triggered, the device collects its geolocation information and after adjusting and confirming the location is sent and becomes visible as a map for other chat users.

This is extremely useful, especially in situations where you need quick help and can't describe the location in words.

We've added some new functions dedicated to share and display location information in Eyeson meetings.

Get and share current position​

The easiest way to share your location with Eyeson is to get your current position and generate a link with a common online maps services like Google Maps.

import eyeson, { Geolocation } from 'eyeson';

const { latitude, longitude } = await Geolocation.getCurrentPosition();
const { googleMaps } = Geolocation.generateLinkFromCoordinates(latitude, longitude);
eyeson.send({ type: 'send_chat', content: googleMaps });

This is just a simple example. For more complex and safer code, please read the Geolocation documentation.

The other way around, if you need to handle position data from a shared link, you can use the parseCoordinatesFromLink() function.

It supports links from Google Maps, OpenStreetMap, Bing Maps, and HERE WeGo.

import eyeson, { Geolocation } from 'eyeson';

eyeson.onEvent(event => {
    if (event.type === 'chat' && Geolocation.linkContainsCoordinates(event.content)) {
        const { latitude, longitude } = Geolocation.parseCoordinatesFromLink(event.content);
        displayMap(latitude, longitude);
    }
});

A parsable link looks for example like this:
https://www.google.com/maps/place/51°30'18.0"+0°05'24.0"W/@51.505,-0.09,17z
where 51.505 is latitude and -0.09 is the longitude.

Display location map​

We recommend Leaflet, a JavaScript library for interactive maps in your custom UI. It plays very nicely together with Eyeson Geolocation functions.

import { Geolocation } from 'eyeson';
import Leaflet from 'https://cdn.jsdelivr.net/npm/leaflet/+esm';

const zoom = 17;
const { latitude, longitude } = await Geolocation.getCurrentPosition();
const map = Leaflet.map('map').setView([latitude, longitude], zoom);
Leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
Leaflet.marker([latitude, longitude]).addTo(map);

Contact​

We'll be happy to hear from you!

If you have a question or want to share any feedback, do not hesitate to create a ticket on GitHub.