V2.01 maps - what can be done with it

[r.walde (r.walde@podconsult.de Walde)]

using the JMIX app in real life situation via mobile it turns out that this functionality would be extremely helpful when using the map addon:

we have single pdf files for each object where a driver needs to work,
including hand painted routes around a building or along a street
the difficulty we have, is, that actually we have to switch between the pdf and i.e. Google maps.

It would be extremely helpful, if we could use the maps addon to combine both:
showing the routes around a building they need to drive in the online street map and also the actual position of the vehicle… in that way the driver does not need to switch both visualizations…

the actual position lat/lng we know, we just need to be able to combine that with fixed coordinates to draw the routes and in the same moment to see where they are…

[pinyazhin (Roman Pinyazhin)]

Hello!

@r.walde

could the maps addon handle this?

• 100 datapoints (vehicles) showed on a street map for Berlin
• the vehicle points should be shown using an icon
• refreshed every 10-15 min
• when clicking on one of the datapoints, additional (up to 100) which are related to the clicked vehicle should be shown, connected via lines (it is a tour the vehicle will drive) and having different colors

Yes, I think it is possible to implement. Features have click listeners and can be differently styled.
Could you clarify how do you get the geo data? Do you load data from database or using external data service through the REST?

@r.walde

we have single pdf files for each object where a driver needs to work,
including hand painted routes around a building or along a street
the difficulty we have, is, that actually we have to switch between the pdf and i.e. Google maps.

As far as I know OpenLayers does not support showing PDF files. However it is possible to show images that can overlay the actual map tiles. If PDF files contain an image with route you can place this image as an additional image layer. For instance, I took screenshot of the map segment of the Berlin and wrote some route (red line).

Then specified an image layer with extent and projection.

<maps:layers>
    <maps:tile>
        <maps:osmSource/>
    </maps:tile>
    <maps:image id="imageLayer">
        <maps:imageStaticSource projection="EPSG:4326">
            <maps:imageExtent minX="13.325735545146276"
                              minY="52.49688240295913"
                              maxX="13.431690860520572"
                              maxY="52.53106917925476"/>
        </maps:imageStaticSource>
    </maps:image>
</maps:layers>

Programmatically set the image to source and this is a result. As you can see image is not scaled, but it fits with coordinates.

Is it your case? Could you describe in more details what you try to achieve?

[r.walde (r.walde@podconsult.de Walde)]

Hi Roman,

thx… better answer (what is possible) than I expected…

• the gps coordinates we get from 2 sources:

1. fixed coordinates where a route starts (small routes, just 30 m street or around a building…)
2. live coordinates for each vehicle via Rest api call

• regarding the maps/pdf
  also a nice idea what you wrote…
  but the pdf files would not be needed any longer, if the lines could be drawn inside the map itself…
  I tested that with Google Maps, created a new map in my_maps, draw some line around a building and then used that map in the standard Google map app.
  In the end it should not play a role which mobile device is used or which navigation app is used…
  I would like to keep the fixed coordinates in our DB, even those which are needed to draw the lines and get the live data vie Rest API.

But we need to separate the usage scenarios:
1.
One is this live navigation with prepared layers for showing the lines
2.
And the other one would be a more static dashboard
where the controller can see (refreshed every 10-15 min) where all vehicles are and where they can click on one vehicle and then see all tour nodes (and hide the others)

so,
one mobile app for navigation with an extra layer for lines
one stationary dashboard in the office to get the overview monitoring

KR
Roland

[pinyazhin (Roman Pinyazhin)]

I’ve made a small demo to demonstrate the ability of add-on according to your task requirements.

Tour and TourStops are JPA entities, the Vehicle is DTO entity. So vehicles loaded from the service and tour loaded from the database.

Vehicles have the same icon but I added the text under each icon. You can change the icon to any other depending of the Vehicle.

The demo project: tour.zip (129.1 KB)

[r.walde (r.walde@podconsult.de Walde)]

great… I will go through it…

[r.walde (r.walde@podconsult.de Walde)]

Hi Roman,

is there a reason why maps do not work in a tab in a tabsheet?

KR
Roland

[pinyazhin (Roman Pinyazhin)]

The Map component should be shown according to the layout rules like any component. For instance, this case works fine:

<layout>
    <tabSheet width="100%" height="100%">
        <tab id="tab1" label="Tab1">
            <vbox width="100%" height="100%">
                <span text="Test test"/>
                <maps:geoMap id="map" width="100%" height="100%">
                    <maps:layers>
                        <maps:tile>
                            <maps:osmSource/>
                        </maps:tile>
                    </maps:layers>
                </maps:geoMap>
            </vbox>
        </tab>
</layout>

Could you check or share the XML descriptor?

[r.walde (r.walde@podconsult.de Walde)]

Hi Roman,

took some time to understand and transfer it to our app…
But, it works fine…

What we can achieve with this solution is the dashboard monitoring,
showing all tours and vehicles with additional information about the status (colors)
and notes… in dialogs.
great…

But for the online navigation,
I do not see yet how to bring it on the smartphone with realtime navigation
like Google Maps navigation…
It might work if we read the GPS coordinates maybe every 15 or 30 sec for a single
tourpoint/vehicle combination…
I need to check if that will work on a small display…

BR
Roland

[r.walde (r.walde@podconsult.de Walde)]

Hi Roman,

one little thing:
I tried to change the marker icon, following the doc how to handle streamResource…
I copied an icon into …/src/main/META-INF.resources.icons
and tried to use that this way:
“icons/icon.png” also tried multiple other writings…
but the icon is never found…
What do I oversea here?

The marker which is in the maps external source works fine…
“/META-INF/frontend/jmix-openlayers-map/icon/marker.png”

KR
Roland

[pinyazhin (Roman Pinyazhin)]

Hello Roland,

for the following files structure icon.png is available under icons/icon.png:

For instance:

markerFeature.addStyles(new Style()
        .withImage(new IconStyle()
                .withSrc("icons/icon.png")
                .withScale(0.05)));

Example with StreamResource:

markerFeature.addStyles(new Style()
        .withImage(new IconStyle()
                .withResource(new StreamResource("icon.png",
                        () -> getClass().getResourceAsStream("/META-INF/resources/icons/icon.png")))
                .withScale(0.05)));

Take a look at Vaadin docs about static and classpath resources: Images & Icons | Application Basics | Vaadin Docs.

[r.walde (r.walde@podconsult.de Walde)]

Hi Roman,

thx… I was confused,
because you sent the code I already used, but which did not work.
But then I saw my mistake…
Little awkward
While transfering your the logic from your sample app into my one,
I copied the icon I wanted to use into the directories of the sample app,
but ran my app…

Anyway, now it works!

[r.walde (r.walde@podconsult.de Walde)]

Hi Roman,

drawing the lines works.
But, I need to draw single lines in one layer, which do not automatically connect.
Is there a way to do that?
I had a look in the OpenLayers docs and it looks like that it might be possible,
but cannot see how to do that in JMIX Maps.

KR
Roland

[pinyazhin (Roman Pinyazhin)]

Hello Roland!

Do you mean add a single line that is not bound with data container? If yes, so here is an example:

<maps:geoMap id="map"
             width="100%"
             height="100%">
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
        <maps:vector id="vectorLayer">
            <maps:vectorSource/>
        </maps:vector>
    </maps:layers>
</maps:geoMap>

protected GeometryFactory geometryFactory = GeometryUtils.getGeometryFactory();

@ViewComponent
private GeoMap map;

@Subscribe
protected void onInit(final InitEvent event) {
    VectorLayer vectorLayer = map.getLayer("vectorLayer");
    VectorSource vectorSource = vectorLayer.getSource();

    LineString lineString = geometryFactory.createLineString(new Coordinate[]{
        new Coordinate(11.013511, 40.353581),
        new Coordinate(2.392612, 48.782472),
        new Coordinate(-3.674846, 40.353581)}
    );
    vectorSource.addFeature(new LineStringFeature(lineString));
}

[r.walde (r.walde@podconsult.de Walde)]

@pinyazhin

protected GeometryFactory geometryFactory = GeometryUtils.getGeometryFactory();

you made my day

[r.walde (r.walde@podconsult.de Walde)]

now I got everything together… can get the live coordinates every 5 sec for all vehicles…

• the monitoring dashboards shows all cars in the map

• click on one shows the tour object with different status color…

• click on one of it shows details and the controller can directly write a notification to the driver and maybe put that single object on the reclamation tour, if needed

• the driver got navigated to the single object using google maps…

• when they arrive and start working, they can see the map with the lines around the building where they need to clean

• every 5 sec they see their own vehicle and they can check if they are still on the line

brilliant
from my view the Map addon is definitely worth to get the enterprise subscription
and then together with the notifications addon: bull’s-eye

BR
Roland

[r.walde (r.walde@podconsult.de Walde)]

Hi Roman,

one more

using LINESTRING I need to use i.e.: 13.xxxxx 52.xxxxx
But in Google or Bing Maps or where ever I looked,
I get the coordinates the other way round: 52.xxxx 13.xxxx

I try to copy and paste coordinates to create multiple objects/lines and need to convert the values every time.
Sure, I can write a little method for that.
But, what is the reason why LINESTRING needs it the other way round?

KR
Roland

[pinyazhin (Roman Pinyazhin)]

Hello Roland!

OpenLayers has a good article why the order of coordinates is different: OpenLayers - Frequently Asked Questions (FAQ)

Because of two different and incompatible conventions. Latitude and longitude are normally given in that order. Maps are 2D representations/projections of the earth’s surface, with coordinates expressed in the x,y grid of the Cartesian system. As they are by convention drawn with west on the left and north at the top, this means that x represents longitude, and y latitude. As stated above, OpenLayers is designed to handle all projections, but the default view is in projected Cartesian coordinates.

I guess it is applicable for JTS library too.

[r.walde (r.walde@podconsult.de Walde)]

got it, thx… wrote a method for easy copy and paste to build a linestring

[r.walde (r.walde@podconsult.de Walde)]

Hi Roman,

is there a way to add linebreaks to the text (.withText(…))?
the openlayer docs are writing about multiple tuples ‘,’\n’,’…
But what ever I tried, I cannot get a linebreak in the text.

KR
Roland

[r.walde (r.walde@podconsult.de Walde)]

found it… it is \n … but I need to find out how to add it into a String column with the correct syntax