-1

In the interest of getting lots of information in one map, I'm trying to do something tricky, and don't know if it's possible.

Specifically, I have some layers which I only want to display for, say, up to half a mile from the center, but other layers which will go out farther.

This is what I have now:

Map with dots and lines

This is what I want to have:

Map with fewer dots and shorter lines

As you can see in the second map, the (hard to see) bright green dots only appear within the first circle, the red and blue dashed lines go out one more circle, the black dots are in all three circles, and nothing's outside the biggest circle.

As is standard with this sort of thing, the black spots are one layer, the red dotted line another, etc.

(The key for the map only contains a list of the "wanted" items, and people get confused when, say, there's a green dot on the map that isn't on the list. We don't want to add items to that list, for a variety of reasons.)

The data is stored and the layers are generated in GeoServer, then pulled in to the Google Map javascript to make the final product, which is embedded in an iframe.

It looks like I can make the layers into different sizes of squares/rectangles relative to the overall map/each other (adjusting the position and size of the bbox in the wms call), but not circles.

All the documentation I've seen is about putting decorative shapes on the map (like the concentric circles), or using css to adjust the shape of the displayed map, and none for adjusting the shape of the layer itself.

If it's relevant, the final map is presented in a static state, so it doesn't need to change once generated.

My current (inefficient) thought: - Generate each layer multiple times as a bunch of small squares/rectangles to approximate the shape of the circle.

There has to be something easier/more efficient than this, but I'm drawing a blank.

Any thoughts?

Thanks!

cosmos42
  • 11
  • 4

1 Answers1

0

Edit: I've managed to come up with a CSS workaround. (the actual html below may or may not work, but the general idea is that I stack circle-shaped divs containing the iframes on top of each other, with each larger circle having fewer layers):

<div style="position:relative; height: 450px; width: 450px; z-index: 1;">
    <div id="base_map" style="position:absolute; left: 0; top: 0; width: 100%; height: 100%;">
        <iframe frameborder="0" style="height: 100%; width: 100%; border=0px" src="url/for/map/with/no layers" >            
        </iframe>
    </div>

    <div id="medium_circle" style="width: 204; height: 204; border-radius: 50%; position: absolute; top: 124; left: 124; z-index: 51">
        <iframe frameborder="0" style="height: 480; width: 480; position: absolute; top: -124, left: -124, border-radius:50%; border=0px" src="url/for/map/with/everywhere/layers">
        </iframe>
    </div>
    <!--repeat divs with successively smaller circles, keeping the iframe size the same, increasing the z-index, and offsetting the iframe back to its "original" upper left corner-->
</div>
cosmos42
  • 11
  • 4