title: Openlayers 3 Reproject EPSG:4326 vector to EPSG:3857
body: <p>I am needing to transform GeoJSON vector data from EPSG:4326 to EPSG:3857...</p>
  
  <p><strong><em>I have a map...</em></strong></p>
  
  <pre><code>var olMapDiv = document.getElementById('olmap');
              control.map = new ol.Map({
                  target: olMapDiv,
                  renderer: 'canvas',
                  layers: layers,
                  interactions: ol.interaction.defaults({
                      altShiftDragRotate: false,
                      dragPan: false,
                      rotate: false
                  }).extend([new ol.interaction.DragPan({ kinetic: null })]),
                  pixelRatio: 1,
                  loadTilesWhileAnimating: true,
                  loadTilesWhileInteracting: true,
                  view: view
              });
  </code></pre>
  
  <p><strong><em>and a view...</em></strong></p>
  
  <pre><code>var view = new ol.View({
                  // make sure the view doesn't go beyond the 22 zoom levels of Google Maps
                  maxZoom: 21,
                  projection: 'EPSG:3857',
                  center: [0, 0],
                  zoom: 0
              });
  </code></pre>
  
  <p><strong><em>I define my geoJson Object...</em></strong></p>
  
  <pre><code>var geoJsonObj = {
                          'type': 'Feature',
                          'geometry': JSON.parse(shape),
                          'name': 'V',
                          'id': V.vID
  
                      }
  </code></pre>
  
  <p><strong><em>I try to read the features into a open layers Vector object and provide projection parameters...</em></strong></p>
  
  <pre><code>var vectorSource = new ol.source.Vector({
                          features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj, {defaultDataProjection:"EPSG:4326",featureProjection:"EPSG:3857"})
                      });
  </code></pre>
  
  <p><strong><em>Then I use the "vectorSource" above in a new Vector layer...</em></strong></p>
  
  <pre><code>vectors = new ol.layer.Vector({                           
                          title: V.vID,
                          source: vectorSource,
                          id: V.vID,
                          name: 'V',
                          label: response.VList[key].Acres,
                          fill: response.VList[key].Shade,
                          stroke: defaultStrokeHex,
                          style: function (feature, resolution) {
                              var text = resolution * 100000 &lt; 10 ? response.VList[key].Acres : '';
  
                              if (text != "") {
                                  styleCache[text] = [new ol.style.Style({
                                      stroke: new ol.style.Stroke({
                                          color: '#319FD3',
                                          width: 1
                                      }),
                                      text: new ol.style.Text({
                                          font: '12px Calibri,sans-serif',
                                          text: text,
                                          fill: new ol.style.Fill({
                                              color: '#000'
                                          }),
                                          stroke: new ol.style.Stroke({
                                              color: '#fff',
                                              width: 3
                                          })
                                      }),
                                      fill: new ol.style.Fill({
                                          color: rcisWebMapUtilities.convertHex(response.VList[key].Shade, '0.5')
                                      })
                                  })];
                              }
                              else if (text == "") {
                                  styleCache[text] = [new ol.style.Style({
                                      fill: new ol.style.Fill({
                                          color: rcisWebMapUtilities.convertHex(response.VList[key].Shade, '0.5')
                                      })
                                  })
                                  ]
                              } return styleCache[text];
                          }
  
  
                      });
  </code></pre>
  
  <p>No matter what I do I either see the vector drawn...but in EPSG:4326 or nothing loads...</p>
  
  <p>I've spent way too much time trying to figure out how to get OpenLayers3 to do this...Any help is greatly appreciated!!</p>