Dynamically draw a map

[lordofscripts]

Let's say I use your component in the website (MVC5) but instead of hardcoding the map contents as you show on the examples, that I want to call a method or whatever that would dynamically draw the map.

For example, think that one time it will draw -in addition to the main (center) marker a series of surrounding locations like restaurants and maybe even draw a line between some of these locations. And that some other time it will draw only family homes and lines joining them.

How could I accomplish that? I tried using mutliple calls to @Html.GoogleMap().Name("map") in the same view but only the first seems to be used and the others ignored, as if I have to do all the map operations in a single .GoogleMap() call.

So, by dynamic it means it may change on every request rather than hard coding the map data in the view.

In case I did not explain it clear enough, that being entirely possible, I would like to find a way to programmatically build the map (by adding markers, polylines, polygons or combining them) rather than declaratively building the map.

[jmelosegui]

The way to do that is through databinding. See the last part of my comment here.

Basically you use your controller to gather all the data you want to draw in a map (regardless the source) then use the view model to pass that data (ie could be a collection of location with icons, descriptions, order of magnitude, basically anything you could place in a map).

Then on the view you can "programmatically" associate properties from your model to markers on shapes objects.

For more info about databinding I encourage you to see this 2 samples:

1. http://www.jmelosegui.com/map/Shapes/DataBindingToModel
2. http://www.jmelosegui.com/map/marker/DataBindingToModel

If you have any use case you think is not covered, please let me know.

[lordofscripts]

Been experimenting with it and got it partially working. Here my remaining issues with it.

First I use your RegionInfo (found in Examples\App_Data) for markers and then a similar one called PathInfo (contains only lat/lng) for points and an ExtendedRegionInfo that has two List<> properties, one for RegionInfo and the other for PathInfo. That ExtendedRegionInfo became my view model (rather than the model being an IEnumerable.

I populated the data structure with two markers (RegionInfo) and a series of points (PathInfo) so that I can display both markers and a line.

In the view I added three BindTo sections to GoogleMap() as follows...

The first for markers using RegionInfo and my custom icons for the markers. I see both markers displayed on the map where expected and in addition to the default center marker. So far so good.

Then I used the same PathInfo lists to display a Circle on each of the line vertices and another for the actual Polyline.

The Circle (vertices of the line, just for testing) are displayed correctly on the map on each vertex:

                    .BindTo<Maps.PathInfo, Circle>
                    (Model.Paths, mappings => mappings.For<Maps.PathInfo>
                        (
                            binding => binding.ItemDataBound
                            (
                                (circle, obj) =>
                                {
                                    circle.Center = new Location(obj.Latitude, obj.Longitude);
                                    circle.Radius = (int)250 / 50;
                                }
                            )
                        )
                    )

But using that same data to generate a Polyline does not work, no error is produced but no polyline is drawn on the map, I used this:

                    .BindTo<Maps.PathInfo, Polyline>
                    (Model.Paths, mappings => mappings.For<Maps.PathInfo>
                        (
                            binding => binding.ItemDataBound
                            (
                                (poly, obj) => poly.AddPoint(new Location(obj.Latitude, obj.Longitude))
                            )
                        )
                    )

Any ideas why the line is not being drawn? the data is correct because the circles are displayed on each of the point locations that are used for the line that does not appear. Do notice that here I use AddPoint() which is more suitable because the points may change. If I instead hard coded the polyline using the .Polyline(AddPoint) method you used in an example, the line is drawn. But in my varition with "variable" points it does not display.

[lordofscripts]

Can't get that line drawn somehow...

[jmelosegui]

The same as your issue #85. Please create a project here on github reproducing your issue so I can clone it and see if I can do something.

[jmelosegui]

Something new on this??

[emilSultan]

Have a same problem with lordofscripts. Circles are displayed, but polyline not showing on map. Used same code
.BindTo<Maps.PathInfo, Polyline> (Model.Paths, mappings => mappings.For ( binding => binding.ItemDataBound ( (poly, obj) => poly.AddPoint(new Location(obj.Latitude, obj.Longitude)) ) ) ) Is there any solution for this issue?

[wsxyhn]

I have faced with the same issue , circles and polygons are showing successfully but the polyline is not showing , Is there anyone find a solution on that subject?

[weedkiller]

Hi, I had a similar issue, where I was trying to dynamically add runners/joggers/bikers trail with markers and then polyline, like so

In my case, I was going from light blue to dark blue on the trail (base on how recent the trail was) and show direction of the joggers.

I could not achieve this. I brought this up, and thought it was my error.