[OpenLayers-Users] Beginner issue

Arnd Wippermann arnd.wippermann at web.de
Wed Feb 24 14:21:28 EST 2010


Hi,
 
1. you have to reproject your vector data (with EPSG:900913 and EPSG:4326 it
is possible without proj4js)
 
2. you have to add your vector layer to your map
 
3. you have to center the map
 
//! set projections for transformation your vectors (before wkt_f.read)
    wkt_f.internalProjection = new OpenLayers.Projection("EPSG:900913");
    wkt_f.externalProjection = new OpenLayers.Projection("EPSG:4326");

//! add vector layer
    index_map.addLayer(hood_vector);

//! set MouseDefaults for navigation
index_map.addControl(new OpenLayers.Control.MouseDefaults());

//! center map
    index_map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

that should show your map.
 
Arnd
 
  _____  

Von: users-bounces at openlayers.org [mailto:users-bounces at openlayers.org] Im
Auftrag von ethio info
Gesendet: Dienstag, 23. Februar 2010 21:51
An: users at openlayers.org
Betreff: Re: [OpenLayers-Users] Beginner issue


Sorry to keep pestering you, but does anyone know what I am doing wrong? 
if anyone can make this work, and tell me how to fix it, I would be very
grateful.

thanks


On Sun, Feb 21, 2010 at 3:23 PM, ethio info <info.ethio at gmail.com> wrote:


I understand what you are saying but my previous request was rejected
because it was over the size limit.
Here it is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">


    <!-- GLOBAL JAVASCRIPT -->
    <script src="http://www.latimes.com/includes/projects/js/menu.js"
type="text/javascript"></script>
    <script src='http://maps.google.com/maps?file=api
<http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuh
R_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ>
&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQ
Ud_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>

    <script type="text/javascript">
        


var index_map;
var wkt_f = new OpenLayers.Format.WKT();

function load_index_map() {
    

//    var max_extent = new
OpenLayers.Bounds(860986,-4383204,5870363,3600489);  //working but no
woreda's
    var max_extent = new
OpenLayers.Bounds(660986,-4383204,4870363,3600489);//not working    



    var options = {
        projection: new OpenLayers.Projection("EPSG:900913"),
        units: "m",
        maxResolution: 156543.0339,
        maxExtent: max_extent,
        minZoomLevel: 10,
        maxZoomLevel: 10,
        controls: []
    };

    // Firing up the map object
    index_map = new OpenLayers.Map('index-map', options);
    
    // Google terrain map
    var gphy = new OpenLayers.Layer.Google("Google Terrain", {
        type: G_PHYSICAL_MAP,
        "sphericalMercator": true
    });
    
    index_map.addLayer(gphy);

    index_map.addControl(new OpenLayers.Control.LayerSwitcher());

    index_map.addControl(new OpenLayers.Control.MousePosition());
    

    // Setting the feature style
    var template = {
        strokeColor : '#2262CC', 
        strokeWidth: 2,
        strokeOpacity: 0.9,
        fillColor : '#2262CC', 
        fillOpacity : 0.3, 
        pointRadius : 3,
        strokeLinecap: "round"
    };

    // Assigning the feature style
    var style = new OpenLayers.Style(template);
    var style_map = new OpenLayers.StyleMap({
        'default': style, 
        'select': {
            fillColor: '#2262CC',
            fillOpacity: 0.75
        }
    });

    var hood_vector = new OpenLayers.Layer.Vector("Wereda");

    ar hood_polygon_371 = wkt_f.read('MULTIPOLYGON (((39.2968382026
8.8274792477, 39.3135039775    8.748488041, 39.3016324666    8.742095689,
39.3036871512    8.7357033371, 39.269899005    8.6920983646, 39.2315448931
8.6608214995, 39.2265223308    8.645982111, 39.2479823696    8.6108241751,
39.2249242428    8.589135838, 39.2221846634    8.5756662392, 39.2306316999
8.5656211146, 39.257114301    8.5601419558, 39.2502653525    8.5464440587,
39.2139659251    8.5220161421, 39.1744703218    8.4606039034, 39.0858905871
8.385037171, 39.0758454626    8.3950822956, 39.0381762455    8.399419963,
39.0363498593    8.5128842107, 39.0671701278    8.5432478827, 39.0655720398
8.5562608849, 39.0872603769    8.5968979797, 39.0874886751    8.6528310595,
39.10415445    8.6825098366, 39.0982186945    8.6939247509, 39.1075789242
8.7101339291, 39.1603158281    8.742095689, 39.1840588498    8.7877553461,
39.1767533046    8.8019098398, 39.2014095194    8.8146945437, 39.2057471869
8.8039645243, 39.2199016805    8.8012249449, 39.2461559833    8.8299905288,
39.2710404964    8.8224566854, 39.2968382026    8.8274792477 )))');
hood_polygon_371.data = {'slug':' 371', 'name': '371'};

var hood_polygon_260 = wkt_f.read('MULTIPOLYGON (((39.506872625
9.3384108099, 39.5290175587    9.3116999105, 39.510068801    9.2838475198,
39.522853505    9.2751721849, 39.4963709039    9.2509725667, 39.5105253976
9.2502876718, 39.5089273096    9.2354482833, 39.5290175587    9.2133033496,
39.5598378272    9.2203805965, 39.5456833335    9.1938979954, 39.5376928935
9.1470968469, 39.5771884968    9.0621698849, 39.5447701403    9.0523530586,
39.4872389725    9.0171951227, 39.461212968    9.0137706484, 39.4299361029
9.0452758117, 39.4004856241    9.0596586037, 39.3701219522    9.1025786813,
39.3758294093    9.126321703, 39.3498034048    9.1690134823, 39.2920439386
9.1770039223, 39.281085621    9.1865924503, 39.2514068439    9.2676383415,
39.2509502473    9.3203752454, 39.2584840907    9.3308769665, 39.266702829
9.3265392991, 39.3011758701    9.2909247666, 39.3253754883    9.3107867174,
39.3824500596    9.293664346, 39.434045472    9.3477710396, 39.4589299851
9.3511955139, 39.506872625    9.3384108099 )))');
hood_polygon_260.data = {'slug':' 260', 'name': '260'};
var hood_vector = new OpenLayers.Layer.Vector(" 
Wereda");
(hood_vector.addFeatures([hood_polygon_260,hood_polygon_371);
    var lon = 4387103;
    var lat = 1007363;
    var zoom = 0;

function show_hood(feature) {
        var selectedFeature = feature;
        var hood_name = selectedFeature.data.name;
        var hed = document.getElementById('hood-index-hed');
        hed.innerHTML = 'Click to visit ' + hood_name;
    }
    
    function hide_hood() {
        var hed = document.getElementById('hood-index-hed');
        hed.innerHTML = "Select one of L.A.&rsquo;s 114 neighborhoods";
    }
    
    function click_hood(feature) {
        var selectedFeature = feature;
        var url = '/mapping-la/neighborhoods/neighborhood/' +
selectedFeature.data.slug;
        index_map.destroy();
        window.location.href = url;
        return false;
    }
    
    var hover_control = new OpenLayers.Control.SelectFeature(hood_vector, {
        hover: true,
        onSelect: show_hood,
        onUnselect: hide_hood,
        onHoverClick: click_hood
    });

    index_map.addControl(hover_control);
    hover_control.activate();
}
    </script>

 
</head>
<body onload="load_index_map()" ><h2 style="font-size: 3em; ">Woreda's</h2>

    <div class="bottomborder pad5vert clear"
style="margin-right:20px;"></div>                                
    <!-- the dynamic hed -->
    <h1 class="pad10vert" id="hood-index-hed" >Select one of the 583
woreda's    </h1>
    <!-- The index map -->
<div id="index-map"  style="width: 1200px; height: 900px"></div>
</body>
</html>



On Sun, Feb 21, 2010 at 10:40 AM, Nicholas Efremov-Kendall
<n.e.kendall at gmail.com> wrote:


you really need to post more code than that for someone to be able to help
you. Are you using proj4.js to change your projection? OL only uses a few
projections/coordinate systems natively.


On Sun, Feb 21, 2010 at 2:39 AM, ethio info <info.ethio at gmail.com> wrote:


Hi, Please take a look at this
site:http://projects.latimes.com/mapping-la/neighborhoods/.
I have copied the source and cleaned it up of ads and so forth and have put
in my data and I just can not see the overlay on the Google map. 
I will include the changes I made below.  The only thing I can think of that
is blocking my overlay is the bounds.  Basically, I want the country of
Ethiopia. 
Just to complicate things further, my overlay was showing when I did not use
a spherical mercator projection but the overlay matched what is in Google
maps ONLY when I zoomed in. 
so after reading some of the issues some people had, I figured I should use
what is in the Mapping LA w/minor changes.  
Can someone suggest a solution?  BTW, the overlay switch works and gives my
overlay as a check box option to click on but it is not displayed on the
Google map
Here are my changes to the Mapping LA Neighborhood source:

var max_extent = new OpenLayers.Bounds(860986,-4383204,5870363,3600489);
    index_map.addControl(new OpenLayers.Control.LayerSwitcher());

var hood_polygon_371 = wkt_f.read('MULTIPOLYGON (((39.2968382026
8.8274792477, 39.3135039775    8.748488041, 39.3016324666    8.742095689,
39.3036871512    8.7357033371, 39.269899005    8.6920983646, 39.2315448931
8.6608214995, 39.2265223308    8.645982111, 39.2479823696    8.6108241751,
39.2249242428    8.589135838, 39.2221846634    8.5756662392, 39.2306316999
8.5656211146, 39.257114301    8.5601419558, 39.2502653525    8.5464440587,
39.2139659251    8.5220161421, 39.1744703218    8.4606039034, 39.0858905871
8.385037171, 39.0758454626    8.3950822956, 39.0381762455    8.399419963,
39.0363498593    8.5128842107, 39.0671701278    8.5432478827, 39.0655720398
8.5562608849, 39.0872603769    8.5968979797, 39.0874886751    8.6528310595,
39.10415445    8.6825098366, 39.0982186945    8.6939247509, 39.1075789242
8.7101339291, 39.1603158281    8.742095689, 39.1840588498    8.7877553461,
39.1767533046    8.8019098398, 39.2014095194    8.8146945437, 39.2057471869
8.8039645243, 39.2199016805    8.8012249449, 39.2461559833    8.8299905288,
39.2710404964    8.8224566854, 39.2968382026    8.8274792477 )))');
hood_polygon_371.data = {'slug':' 371', 'name': '371'};

var hood_polygon_260 = wkt_f.read('MULTIPOLYGON (((39.506872625
9.3384108099, 39.5290175587    9.3116999105, 39.510068801    9.2838475198,
39.522853505    9.2751721849, 39.4963709039    9.2509725667, 39.5105253976
9.2502876718, 39.5089273096    9.2354482833, 39.5290175587    9.2133033496,
39.5598378272    9.2203805965, 39.5456833335    9.1938979954, 39.5376928935
9.1470968469, 39.5771884968    9.0621698849, 39.5447701403    9.0523530586,
39.4872389725    9.0171951227, 39.461212968    9.0137706484, 39.4299361029
9.0452758117, 39.4004856241    9.0596586037, 39.3701219522    9.1025786813,
39.3758294093    9.126321703, 39.3498034048    9.1690134823, 39.2920439386
9.1770039223, 39.281085621    9.1865924503, 39.2514068439    9.2676383415,
39.2509502473    9.3203752454, 39.2584840907    9.3308769665, 39.266702829
9.3265392991, 39.3011758701    9.2909247666, 39.3253754883    9.3107867174,
39.3824500596    9.293664346, 39.434045472    9.3477710396, 39.4589299851
9.3511955139, 39.506872625    9.3384108099 )))');
hood_polygon_260.data = {'slug':' 260', 'name': '260'};
var hood_vector = new OpenLayers.Layer.Vector("Wereda");
(hood_vector.addFeatures([hood_polygon_260,hood_polygon_371);
    var lon = 4387103;
    var lat = 1007363;
    var zoom = 0;



_______________________________________________
Users mailing list
Users at openlayers.org
http://openlayers.org/mailman/listinfo/users






-- 
Nicholas Efremov-Kendall
Fulbright Student 2009-2010, Ukraine
nefremov at artsci.wustl.edu
c/o Halyna Yerko
Balzaka 92a, Kv 27
02232
Kyiv, Ukraine
(mob) +380963576524




-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20100224/b679eca8/attachment.html


More information about the Users mailing list