Topic: How to draw a circle on the map?!

Hi!

Can you please help me understand how to do it?

To be honest, I can't even find a way to properly calculate 4 points near a central point on the map in lat / long coordinates in order to draw a poly around it - please at least tell me, how it should be done...

Re: How to draw a circle on the map?!

Hello

Example how to draw a circle using polygon:

using System.Collections.Generic;
using UnityEngine;

public class DrawCircleUsingPoly:MonoBehaviour
{
    public float radius = 64; //pixels
    public int segments = 16;
    
    private OnlineMapsDrawingPoly poly;
    private List<Vector2> points;
    private OnlineMaps map;
    private OnlineMapsMarker marker;
    private Vector2 markerPosition;

    private void Start()
    {
        map = OnlineMaps.instance;

        // Init points
        points = new List<Vector2>(segments);
        for (int i = 0; i < segments; i++) points.Add(new Vector2());

        // Create poly
        poly = new OnlineMapsDrawingPoly(points, Color.green, 3);

        marker = map.AddMarker(map.position, "Center of circle");
        markerPosition = marker.position;

        // Draw circle
        UpdateCircle();

        map.AddDrawingElement(poly);
    }

    private void Update()
    {
        if (markerPosition != marker.position) UpdateCircle();
    }

    private void UpdateCircle()
    {
        float r = radius / OnlineMapsUtils.tileSize;
        float step = 360f / segments;
        double x, y;
        marker.GetPosition(out x, out y);

        // Old way (Online Maps v2.3):
        // OnlineMapsUtils.LatLongToTiled(x, y, map.zoom, out x, out y);

        OnlineMapsProjection projection = map.projection;
        projection.CoordinatesToTile(x, y, map.zoom, out x, out y);

        for (int i = 0; i < segments; i++)
        {
            double px = x + Mathf.Cos(step * i * Mathf.Deg2Rad) * r;
            double py = y + Mathf.Sin(step * i * Mathf.Deg2Rad) * r;

            // Old way (Online Maps v2.3):
            // OnlineMapsUtils.TileToLatLong(px, py, map.zoom, out px, out py);

            projection.TileToCoordinates(px, py, map.zoom, out px, out py);

            points[i] = new Vector2((float)px, (float)py);
        }
    }
}
Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

3 (edited by SweetTooth 2016-08-05 09:01:11)

Re: How to draw a circle on the map?!

Oh, thank you very much!

Re: How to draw a circle on the map?!

To be honest, this solution doesn't look like I hoped, especially when radius is being modified at runtime... Can you please tell me if there is a way to make the circle more accurate, more smooth? Can't I just use a custom mesh and scale it?

Re: How to draw a circle on the map?!

Also, can you please tell me, how can I convert real-life radius in meters to pixels?

Re: How to draw a circle on the map?!

To make a circle more accurate increase segments.

Yes, you can place the mesh on the map.
Actually, it would be a much better solution.
The example below.
Just your original question was about poly.
Use OnlineMapsTileSetControl.GetWorldPosition, to convert coordinates in Unity World Space position.
http://infinity-code.com/doxygen/online … 2992c6e097

Yes, you can convert the radius in meters to pixels.
If you really need it, I can give an example.
But keep in mind a few things:
1. The radius in pixels (R) is different at different zoom level.
2. R is different at different latitudes.
3. R left == R right.
4. R left != R up.
5. R up != R down.

Example of drawing a circle using mesh:

using UnityEngine;

public class DrawCircleWithRadius : MonoBehaviour
{
    public GameObject circle;
    public float diameterInKM = 0.5f;
    public float sizeY = 0.02f;

    private OnlineMapsMarker marker;

    private void Start()
    {
        marker = OnlineMaps.instance.AddMarker(OnlineMaps.instance.position, "Marker");
    }

    private void Update ()
    {
        circle.transform.position = OnlineMapsTileSetControl.instance.GetWorldPosition(marker.position);

        OnlineMaps api = OnlineMaps.instance;

        Vector2 distance = OnlineMapsUtils.DistanceBetweenPoints(api.topLeftPosition, api.bottomRightPosition);

        float scaleX = diameterInKM / distance.x * api.tilesetSize.x;
        float scaleY = diameterInKM / distance.y * api.tilesetSize.y;
        float scale = (scaleX + scaleY) / 2;

        circle.transform.localScale = new Vector3(scale, sizeY, scale);
    }
}
Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

Re: How to draw a circle on the map?!

Thank you very much, Alex!

I'm sorry for any confusion I caused... You see, we have objects (markers) on the map and want to show a circle around player marker, which should explain to player which objects can be interacted with (since they are considered visible) and which can't (the player should reach them first)... So on the one hand we need a solution, which would look physically correct (the circle should overlap the visible markers and match the distance to objects, which is also being displayed) and on the other hand everything should scale like markers when zoom level is changed...

Can you please help us understand, how to do this?

8 (edited by SweetTooth 2016-08-05 11:39:36)

Re: How to draw a circle on the map?!

I'm very sorry for so many questions, pleae bear with me...

Actually I also need to limit, how far the map can be scrolled - for example, no further than 1.5 kilometers from current player position... And it seems that in order to do this (in order to calculate OnlineMapsPositionRange), I have to basically solve the same problem - to find points in (lat, long), which would have a distance of 1500 meters between them and a player position. Can you please tell me, how can I do this?

Re: How to draw a circle on the map?!

Both solutions (post 2, 6) reach your goals.
Please explain more detail why you can not use it?

Example how to limit the distance of the map from the marker:

using System;
using UnityEngine;

public class LimitPositionWithRadius:MonoBehaviour
{
    public float raduis = 1.5f; // km
    private OnlineMapsMarker playerMarker;
    private float sqrRadius;
    private OnlineMaps map;
    private bool ignoreEvent;

    private void Start()
    {
        sqrRadius = raduis * raduis;
        map = OnlineMaps.instance;
        map.OnChangePosition += OnChangePosition;
        map.OnChangeZoom += OnChangePosition;
        playerMarker = map.AddMarker(map.position, "Player");
    }

    private void OnChangePosition()
    {
        if (ignoreEvent) return;

        double mx, my;
        playerMarker.GetPosition(out mx, out my);

        double px, py;
        map.GetPosition(out px, out py);

        double dx, dy;
        OnlineMapsUtils.DistanceBetweenPoints(px, py, mx, my, out dx, out dy);
        double sqrR = dx * dx + dy * dy;
        if (sqrR > sqrRadius)
        {
            double tx1, ty1, tx2, ty2;
            map.projection.CoordinatesToTile(px, py, map.zoom, out tx1, out ty1);
            map.projection.CoordinatesToTile(mx, my, map.zoom, out tx2, out ty2);

            double scale = raduis / Math.Sqrt(sqrR);
            double ntx = tx2 + (tx1 - tx2) * scale;
            double nty = ty2 + (ty1 - ty2) * scale;
            map.projection.TileToCoordinates(ntx, nty, map.zoom, out ntx, out nty);
            ignoreEvent = true;
            map.SetPosition(ntx, nty);
            ignoreEvent = false;

            OnlineMapsUtils.DistanceBetweenPoints(ntx, nty, mx, my, out dx, out dy);
            Debug.Log("New distance: " + Math.Sqrt(dx * dx + dy * dy));
        }
    }
}
Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

Re: How to draw a circle on the map?!

Actually you are absolutely right, the circle mesh solution is just perfect! Although I should note that if you include it into API examples, please replace Update method with the LateUpdate, so that there would be no visible delay when the map is being scrolled.

And thank you very much for the distance limitation example, that's just what we need!

Re: How to draw a circle on the map?!

Actually better to use OnChangePosition and OnChangeZoom, to reduce the number of calculations and do not position GameObject each frame.
This example is quite old, and I do not remember why I used Update.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

Re: How to draw a circle on the map?!

Thanks for the tip, you are absolutely correct!

Re: How to draw a circle on the map?!

This is probably a silly question but when I try use the code in post #2 I get errors:
OnlineMapsProjection  <-- class is missing
OnlineMapsMarker.GetPosition  <-- GetPoistion is missing
OnlineMaps.projection  <-- projection is missing

OnlineMaps.version == "2.3.0.18"

Re: How to draw a circle on the map?!

Because these methods has been added in Online Maps v2.4.
For Online Maps v2.3 use OnlineMapsUtils.LatLongToTiled, OnlineMapsUtils.TileToLatLong, OnlineMapsMarkerBase.position.
Or just update Online Maps through the built-in update system.

How to open the built-in update system:
Online Maps / Help / Check Updates.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

Re: How to draw a circle on the map?!

That explains it. Thanks!

Re: How to draw a circle on the map?!

Hi
I check your circle drawing, it just draws a bordered circle, what am i look is draw a custom circle with a center filler with 40% opacity and thick border.
Can anyone please help me in drawing such circle.

Re: How to draw a circle on the map?!

Hello.

For the way in post #2 to have filling see documentation (Troubleshooting / Known Issues section).

Or use the way in post #6.

Or you can use a 3D marker with a circle prefab.

Or you can use TilesetOverlayExample (see example atlas), where the overlay will contain a circle texture.

Or you can write a custom map shader that will draw circles. It's not very complicated, but you will be able to have a limited number of circles.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.

Re: How to draw a circle on the map?!

Well before you replied, i already checked the 2dtexture marker, but issue is i want to draw that circle on a specific radius. like the drawing circle functionality do,
I want my custom circle to be drawed to the whole radius. when i zoom the map, that marker is also zoomed. And in drawed circle functionality, the circle is not zoomed. It is still there where the boundaries are.

Re: How to draw a circle on the map?!

Post #6 explains how to scale 2D markers.
But I would use 3D markers. At least because it has the inbuilt ability to have the size in metres.

Kind Regards,
Infinity Code Team.

Boost your productivity a lot and immediately using Ultimate Editor Enhancer. Trial and non-commerce versions available.